Mirrors/servo
1
0
Fork 0
mirror of https://github.com/servo/servo.git synced 2025-08-15 18:35:33 +01:00
Code Issues Projects Releases Packages Wiki Activity

Update web-platform-tests to revision b'b728032f59a396243864b0f8584e7211e3632005'

Browse source
This commit is contained in:
WPT Sync Bot 2022-11-10 01:22:36 +00:00
parent ace9b32b1c
commit df68c4e5d1
15632 changed files with 514865 additions and 155000 deletions
Download patch file Download diff file Expand all files Collapse all files

26
tests/wpt/web-platform-tests/css/CSS2/LICENSE-BSD
View file

@ -1,26 +0,0 @@
Redistribution and use in source and binary forms, with or without
modification, are permitted provided that the following conditions
are met:
1. Redistributions of source code must retain the original copyright
notice, this list of conditions and the following disclaimer.
2. Redistributions in binary form must reproduce the original
copyright notice, this list of conditions and the following
disclaimer in the documentation and/or other materials provided
with the distribution.
3. Neither the name of the World Wide Web Consortium (W3C) nor the
names of its contributors may be used to endorse or promote
products derived from this software without specific prior
written permission.
THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS
"AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT
LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS
FOR A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE AUTHOR
BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY,
OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT
OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR
BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY,
WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE
OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE,
EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.

55
tests/wpt/web-platform-tests/css/CSS2/LICENSE-W3CD
View file

@ -1,55 +0,0 @@
W3C® DOCUMENT LICENSE
http://www.w3.org/Consortium/Legal/2002/copyright-documents-20021231
Public documents on the W3C site are provided by the copyright holders
under the following license. By using and/or copying this document,
or the W3C document from which this statement is linked, you (the
licensee) agree that you have read, understood, and will comply with
the following terms and conditions:
Permission to copy, and distribute the contents of this document, or
the W3C document from which this statement is linked, in any medium
for any purpose and without fee or royalty is hereby granted, provided
that you include the following on ALL copies of the document, or
portions thereof, that you use:
1. A link or URL to the original W3C document.
2. The pre-existing copyright notice of the original author, or if
it doesn't exist, a notice (hypertext is preferred, but a textual
representation is permitted) of the form:
"Copyright © [$date-of-document] World Wide Web Consortium,
(Massachusetts Institute of Technology, European Research
Consortium for Informatics and Mathematics, Keio University).
All Rights Reserved.
http://www.w3.org/Consortium/Legal/2002/copyright-documents-20021231"
3. If it exists, the STATUS of the W3C document.
When space permits, inclusion of the full text of this NOTICE should
be provided. We request that authorship attribution be provided in any
software, documents, or other items or products that you create
pursuant to the implementation of the contents of this document, or
any portion thereof.
No right to create modifications or derivatives of W3C documents is
granted pursuant to this license. However, if additional requirements
(documented in the Copyright FAQ <http://www.w3.org/Consortium/Legal/IPR-FAQ>)
are satisfied, the right to create modifications or derivatives is
sometimes granted by the W3C to individuals complying with those
requirements.
THIS DOCUMENT IS PROVIDED "AS IS," AND COPYRIGHT HOLDERS MAKE NO
REPRESENTATIONS OR WARRANTIES, EXPRESS OR IMPLIED, INCLUDING, BUT NOT
LIMITED TO, WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR
PURPOSE, NON-INFRINGEMENT, OR TITLE; THAT THE CONTENTS OF THE DOCUMENT
ARE SUITABLE FOR ANY PURPOSE; NOR THAT THE IMPLEMENTATION OF SUCH
CONTENTS WILL NOT INFRINGE ANY THIRD PARTY PATENTS, COPYRIGHTS,
TRADEMARKS OR OTHER RIGHTS.
COPYRIGHT HOLDERS WILL NOT BE LIABLE FOR ANY DIRECT, INDIRECT, SPECIAL
OR CONSEQUENTIAL DAMAGES ARISING OUT OF ANY USE OF THE DOCUMENT OR THE
PERFORMANCE OR IMPLEMENTATION OF THE CONTENTS THEREOF.
The name and trademarks of copyright holders may NOT be used in
advertising or publicity pertaining to this document or its contents
without specific, written prior permission. Title to copyright in this
document will at all times remain with copyright holders.

66
tests/wpt/web-platform-tests/css/CSS2/LICENSE-W3CTS
View file

@ -1,66 +0,0 @@
W3C® TEST SUITE LICENSE
http://www.w3.org/Consortium/Legal/2008/04-testsuite-license
This document, Test Suites and other documents that link to this
statement are provided by the copyright holders under the following
license: By using and/or copying this document, or the W3C document
from which this statement is linked, you (the licensee) agree that
you have read, understood, and will comply with the following terms
and conditions:
Permission to copy, and distribute the contents of this document, or
the W3C document from which this statement is linked, in any medium
for any purpose and without fee or royalty is hereby granted, provided
that you include the following on ALL copies of the document, or
portions thereof, that you use:
1. A link or URL to the original W3C document.
2. The pre-existing copyright notice of the original author, or if
it doesn't exist, a notice (hypertext is preferred, but a textual
representation is permitted) of the form:
"Copyright © [$date-of-document] World Wide Web Consortium,
(Massachusetts Institute of Technology, European Research
Consortium for Informatics and Mathematics, Keio University).
All Rights Reserved.
http://www.w3.org/Consortium/Legal/2008/04-testsuite-copyright"
3. If it exists, the STATUS of the W3C document.
When space permits, inclusion of the full text of this NOTICE should
be provided. We request that authorship attribution be provided in any
software, documents, or other items or products that you create
pursuant to the implementation of the contents of this document, or
any portion thereof.
No right to create modifications or derivatives of W3C documents is
granted pursuant to this license. However, if additional requirements
(documented in the Copyright FAQ <http://www.w3.org/Consortium/Legal/IPR-FAQ>)
are satisfied, the right to create modifications or derivatives isD
sometimes granted by the W3C to individuals complying with those
requirements.
If a Test Suite distinguishes the test harness (or, framework for
navigation) and the actual tests, permission is given to remove or
alter the harness or navigation if the Test Suite in question allows
to do so. The tests themselves shall NOT be changed in any way.
The name and trademarks of W3C and other copyright holders may NOT be
used in advertising or publicity pertaining to this document or other
documents that link to this statement without specific, written prior
permission. Title to copyright in this document will at all times
remain with copyright holders. Permission is given to use the
trademarked string "W3C" within claims of performance concerning W3C
Specifications or features described therein, and there only, if the
test suite so authorizes.
THIS WORK IS PROVIDED BY W3C, MIT, ERCIM, KEIO UNIVERSITY, THE
COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND ANY EXPRESS OR IMPLIED
WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED WARRANTIES OF
MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE DISCLAIMED.
IN NO EVENT SHALL W3C, MIT, ERCIM, KEIO UNIVERSITY, THE COPYRIGHT
OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT
LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY
THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
(INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.

11
tests/wpt/web-platform-tests/css/CSS2/floats/float-root-ref.html Normal file
View file

@ -0,0 +1,11 @@
<!DOCTYPe html>
<style>
body {
float: right;
margin-top: 0;
}
</style>
<body>
<p>foo</p>
</body>

13
tests/wpt/web-platform-tests/css/CSS2/floats/float-root.html Normal file
View file

@ -0,0 +1,13 @@
<!DOCTYPe html>
<link rel="help" href="https://w3c.github.io/csswg-drafts/css2/#propdef-float">
<link rel="match" href="float-root-ref.html">
<style>
:root {
float: right;
}
</style>
<body>
<p>foo</p>
</body>

10
tests/wpt/web-platform-tests/css/CSS2/floats/float-under-flatten-under-preserve-3d.html Normal file
View file

@ -0,0 +1,10 @@
<!DOCTYPE html>
<link rel="match" href="../../reference/ref-filled-green-100px-square.xht">
<link rel="help" href="https://drafts.csswg.org/css2/visuren.html#float-position">
<link rel="help" href="https://crbug.com/1298871">
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
<div style="transform-style: preserve-3d">
<div style="background: red; width: 100px; height: 100px">
<div style="float: left; background: green; width: 100px; height: 100px"></div>
</div>
</div>

26
tests/wpt/web-platform-tests/css/CSS2/floats/floats-placement-005-ref.html Normal file
View file

@ -0,0 +1,26 @@
<!DOCTYPE html>
<style>
.float-left {
float: left;
clear: left;
width: 50px;
height: 50px;
background: green;
}
.float-right {
float: right;
clear: right;
width: 50px;
height: 50px;
background: green;
}
</style>
<div style="width: 150px; display: flow-root;">
<div class="float-left"></div>
<div style="height: 40px;"></div>
<div class="float-right"></div>
<div class="float-left" style="width: 100px; height: 40px; background: cyan;"></div>
<div class="float-right"></div>
<div class="float-left"></div>
<div class="float-right"></div>
</div>

34
tests/wpt/web-platform-tests/css/CSS2/floats/floats-placement-005.html Normal file
View file

@ -0,0 +1,34 @@
<!DOCTYPE html>
<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=1378106">
<link rel="match" href="floats-placement-005-ref.html">
<style>
.float-left {
float: left;
clear: left;
width: 50px;
height: 50px;
background: green;
}
.float-right {
float: right;
clear: right;
width: 50px;
height: 50px;
background: green;
}
span {
display: inline-block;
width: 50px;
height: 40px;
background: cyan;
}
</style>
<div style="width: 150px; display: flow-root;">
<div class="float-left"></div>
<div style="height: 40px;"></div>
<div class="float-right"></div>
<div class="float-right"></div>
<div class="float-left"></div>
<div class="float-right"></div>
<div style="margin-top: 10px; line-height: 0;"><span></span><span></span></div>
</div>

121
tests/wpt/web-platform-tests/css/CSS2/floats/floats-wrap-bfc-with-margin-001-ref.html Normal file
View file

@ -0,0 +1,121 @@
<!DOCTYPE html>
<html class="reftest-wait">
<meta charset="utf-8">
<title>CSS Reference Case</title>
<link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
<script>
const MARGIN_VALS = [-30, -20, -17,
// Values -16 through -1 are non-interoperable and are
// split off to a separate test.
0, 5, 10, 14
// Values over 15 are non-interoperable and are
// split off to a separate test.
];
const HORIZ_SIDES = ["left", "right"]; // Used for 'float:*' and 'margin-*'.
const DIRECTION_VALS = ["ltr", "rtl"];
function newDivWithClassAndParent(className, parent) {
let elem = document.createElement("div");
if (className) {
elem.classList.add(className);
}
parent.appendChild(elem);
return elem;
}
function generateGroup(directionVal, floatVal, marginPropSuffix) {
let group = newDivWithClassAndParent("group", document.body);
group.style.direction = directionVal;
const marginPropName = "margin-" + marginPropSuffix;
for (let v of MARGIN_VALS) {
// In this test, the negative values are specifically the ones that
// are expected to cause wrapping.
const isExpectingToWrap = (v < 0);
let container = newDivWithClassAndParent("container", group);
if (isExpectingToWrap) {
container.style.flexWrap = "wrap";
}
if ((floatVal == "right") != (directionVal == "rtl")) {
// In the corresponding piece of the testcase, the float is floated to
// the inline-end side (for the given writing-mode). We use a
// "row-reverse" flex container as our mockup for that here.
container.style.flexDirection = "row-reverse";
}
let float = newDivWithClassAndParent("float", container);
float.style.cssFloat = floatVal;
let bfc = newDivWithClassAndParent("bfc", container);
if (isExpectingToWrap) {
// If we wrap, then we expect the testcase to resolve the BFC's
// content-box width to be: 30px (container's available space)
// minus 2px (for bfc's border), plus the absolute value of whatever
// (negative) margin value we're testing here.
bfc.style.width = (30 - 2 - v) + "px";
}
// Set the actual margin value that we're testing here, EXCEPT if we're
// not-expecting-to-wrap and the bfc's margin is going to "overlap" the
// float in the testcase. (In this latter case, the margin doesn't
// impact the testcase's rendering, so we take care not to set it here.)
if (isExpectingToWrap || marginPropSuffix != floatVal) {
bfc.style[marginPropName] = v + "px";
}
}
}
function go() {
for (let directionVal of DIRECTION_VALS) {
for (let floatVal of HORIZ_SIDES) {
for (let marginPropSuffix of HORIZ_SIDES) {
generateGroup(directionVal, floatVal, marginPropSuffix);
}
}
}
// Note: the "reftest-wait" usage here isn't strictly necessary; it just
// helps ensure that we actually make it through all of the above JS and
// populate this document with the content that we want to render.
// (Specifically: if we e.g. throw a JS exception somewhere early in both
// the testcase and reference case, then the "reftest-wait" class will
// never be removed; and that will cause the test run to be classified
// as a failure, rather than a trivial "pass" with a visual comparison of
// two blank documents.)
document.documentElement.removeAttribute("class");
}
</script>
<style>
.group {
width: 500px;
border: 1px solid black;
}
.container {
display: inline-flex;
align-content: start;
vertical-align: top;
width: 30px;
height: 40px;
/* This border and margin are just cosmetic, to avoid overlap between
* adjacent containers within a row. */
border: 1px solid gray;
margin-left: 30px;
}
.float {
width: 7px;
height: 8px;
background: fuchsia;
border: 1px solid purple;
margin: 1px 3px 1px 2px;
}
.bfc {
display: flow-root;
background: aqua;
height: 15px;
border: 1px solid blue;
/* We use "flex: 1" (on a flex item) to mock up the fill-available-space
* block-layout behavior in the testcase. */
flex: 1 auto;
}
</style>
<body onload="go()">
</body>
</html>

114
tests/wpt/web-platform-tests/css/CSS2/floats/floats-wrap-bfc-with-margin-001.html Normal file
View file

@ -0,0 +1,114 @@
<!DOCTYPE html>
<html class="reftest-wait">
<meta charset="utf-8">
<title>CSS Test: If a BFC's inline-axis margin is sufficiently negative such
that it inflates its border-box to be too large to fit alongside a float,
then it should be pushed below the float</title>
<link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
<link rel="help" href="https://www.w3.org/TR/CSS21/visuren.html#floats">
<meta name="assert" content="The border box of ... an element in the normal flow that establishes a new block formatting context ... must not overlap the margin box of any floats in the same block formatting context as the element itself. If necessary, implementations should clear the said element by placing it below any preceding floats">
<link rel="help" href="https://www.w3.org/TR/CSS21/visudet.html#blockwidth">
<!-- For a BFC with 'width:auto', negative total inline-axis margins will
effectively set a lower-bound for the used border-box width, to satisfy
the equation in CSS2.1 10.3.3. This test exercises scenarios where this
mechanism "props up" the BFC's border-box enough to make its border-box
collide width the float's margin-box, resulting in it needing to be moved
down below the float. -->
<link rel="match" href="floats-wrap-bfc-with-margin-001-ref.html">
<script>
const MARGIN_VALS = [-30, -20, -17,
// Values -16 through -1 are non-interoperable and are
// split off to a separate test.
0, 5, 10, 14
// Values over 15 are non-interoperable and are
// split off to a separate test.
];
const HORIZ_SIDES = ["left", "right"]; // Used for 'float:*' and 'margin-*'.
const DIRECTION_VALS = ["ltr", "rtl"];
function newDivWithClassAndParent(className, parent) {
let elem = document.createElement("div");
if (className) {
elem.classList.add(className);
}
parent.appendChild(elem);
return elem;
}
function generateGroup(directionVal, floatVal, marginPropSuffix) {
let group = newDivWithClassAndParent("group", document.body);
group.style.direction = directionVal;
const marginPropName = "margin-" + marginPropSuffix;
for (let v of MARGIN_VALS) {
let container = newDivWithClassAndParent("container", group);
let float = newDivWithClassAndParent("float", container);
float.style.cssFloat = floatVal;
let bfc = newDivWithClassAndParent("bfc", container);
bfc.style[marginPropName] = v + "px";
}
}
function go() {
for (let directionVal of DIRECTION_VALS) {
for (let floatVal of HORIZ_SIDES) {
for (let marginPropSuffix of HORIZ_SIDES) {
generateGroup(directionVal, floatVal, marginPropSuffix);
}
}
}
// Note: the "reftest-wait" usage here isn't strictly necessary; it just
// helps ensure that we actually make it through all of the above JS and
// populate this document with the content that we want to render.
// (Specifically: if we e.g. throw a JS exception somewhere early in both
// the testcase and reference case, then the "reftest-wait" class will
// never be removed; and that will cause the test run to be classified
// as a failure, rather than a trivial "pass" with a visual comparison of
// two blank documents.)
document.documentElement.removeAttribute("class");
}
</script>
<style>
.group {
width: 500px;
border: 1px solid black;
}
.container {
/* This is the container that holds our float+bfc. We make it an
inline-block so that we can test a bunch of these in a row. */
display: inline-block;
vertical-align: top;
width: 30px;
height: 40px;
/* This border and margin are just cosmetic, to avoid overlap between
* adjacent containers within a row. */
border: 1px solid gray;
margin-left: 30px;
}
.float {
/* We'll set the float property elsewhere (to 'right' or 'left'). */
width: 7px;
height: 8px;
background: fuchsia;
border: 1px solid purple;
/* Each .float's margin-box (which the corresponding .bfc's border-box cannot
* overlap) is 14px wide:
* 7px content + 2px horizontal border + 5px horizontal margin
* Note that we're intentionally using a nonzero 'margin' here, to be sure
* the UA is using the float's margin-box (and not one of its other
* boxes) for this non-overlapping calculation. */
margin: 1px 3px 1px 2px;
}
.bfc {
/* Each .bfc's border-box width is 2px (from the border) plus whatever we
* resolve 'width:auto' to, which is influenced by the particular choice of
* 'margin' values (and the available space). */
display: flow-root;
background: aqua;
height: 15px;
border: 1px solid blue;
}
</style>
<body onload="go()">
</body>
</html>

127
tests/wpt/web-platform-tests/css/CSS2/floats/floats-wrap-bfc-with-margin-001a.tentative.html Normal file
View file

@ -0,0 +1,127 @@
<!DOCTYPE html>
<html class="reftest-wait">
<meta charset="utf-8">
<title>CSS Test: If a BFC's inline-axis margin is sufficiently negative such
that it inflates its border-box to be too large to fit alongside a float,
then it should be pushed below the float</title>
<link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
<link rel="help" href="https://www.w3.org/TR/CSS21/visuren.html#floats">
<link rel="help" href="https://drafts.csswg.org/css-sizing-4/#stretch-fit-sizing">
<meta name="assert" content="The border box of ... an element in the normal flow that establishes a new block formatting context ... must not overlap the margin box of any floats in the same block formatting context as the element itself. If necessary, implementations should clear the said element by placing it below any preceding floats">
<link rel="help" href="https://www.w3.org/TR/CSS21/visudet.html#blockwidth">
<!-- For a BFC with 'width:auto', negative total inline-axis margins will
effectively set a lower-bound for the used border-box width, to satisfy
the equation in CSS2.1 10.3.3. This test exercises scenarios where this
mechanism "props up" the BFC's border-box enough to make its border-box
collide width the float's margin-box, resulting in it needing to be moved
down below the float. -->
<!-- NOTE: This testcase-variant actually has "width:stretch" (and
vendor-prefixed equivalents) rather than "auto", but I think the effect
should be the same, since the "stretch" and "auto" sizing keywords are
equivalent in most cases. (Though: in practice, WebKit and Gecko are both
more-eager-to-wrap here, with their vendor-prefixed "stretch" values, as
compared to with "auto"... I'm not sure whether or not there's a good
reason for that, so this test is named with ".tentative" for now.) -->
<link rel="match" href="floats-wrap-bfc-with-margin-001-ref.html">
<script>
const MARGIN_VALS = [-30, -20, -17,
// Values -16 through -1 are non-interoperable and are
// split off to a separate test.
0, 5, 10, 14
// Values over 15 are non-interoperable and are
// split off to a separate test.
];
const HORIZ_SIDES = ["left", "right"]; // Used for 'float:*' and 'margin-*'.
const DIRECTION_VALS = ["ltr", "rtl"];
function newDivWithClassAndParent(className, parent) {
let elem = document.createElement("div");
if (className) {
elem.classList.add(className);
}
parent.appendChild(elem);
return elem;
}
function generateGroup(directionVal, floatVal, marginPropSuffix) {
let group = newDivWithClassAndParent("group", document.body);
group.style.direction = directionVal;
const marginPropName = "margin-" + marginPropSuffix;
for (let v of MARGIN_VALS) {
let container = newDivWithClassAndParent("container", group);
let float = newDivWithClassAndParent("float", container);
float.style.cssFloat = floatVal;
let bfc = newDivWithClassAndParent("bfc", container);
bfc.style[marginPropName] = v + "px";
}
}
function go() {
for (let directionVal of DIRECTION_VALS) {
for (let floatVal of HORIZ_SIDES) {
for (let marginPropSuffix of HORIZ_SIDES) {
generateGroup(directionVal, floatVal, marginPropSuffix);
}
}
}
// Note: the "reftest-wait" usage here isn't strictly necessary; it just
// helps ensure that we actually make it through all of the above JS and
// populate this document with the content that we want to render.
// (Specifically: if we e.g. throw a JS exception somewhere early in both
// the testcase and reference case, then the "reftest-wait" class will
// never be removed; and that will cause the test run to be classified
// as a failure, rather than a trivial "pass" with a visual comparison of
// two blank documents.)
document.documentElement.removeAttribute("class");
}
</script>
<style>
.group {
width: 500px;
border: 1px solid black;
}
.container {
/* This is the container that holds our float+bfc. We make it an
inline-block so that we can test a bunch of these in a row. */
display: inline-block;
vertical-align: top;
width: 30px;
height: 40px;
/* This border and margin are just cosmetic, to avoid overlap between
* adjacent containers within a row. */
border: 1px solid gray;
margin-left: 30px;
}
.float {
/* We'll set the float property elsewhere (to 'right' or 'left'). */
width: 7px;
height: 8px;
background: fuchsia;
border: 1px solid purple;
/* Each .float's margin-box (which the corresponding .bfc's border-box cannot
* overlap) is 14px wide:
* 7px content + 2px horizontal border + 5px horizontal margin
* Note that we're intentionally using a nonzero 'margin' here, to be sure
* the UA is using the float's margin-box (and not one of its other
* boxes) for this non-overlapping calculation. */
margin: 1px 3px 1px 2px;
}
.bfc {
/* Each .bfc's border-box width is 2px (from the border) plus whatever we
* resolve 'width:auto' to, which is influenced by the particular choice of
* 'margin' values (and the available space). */
display: flow-root;
background: aqua;
height: 15px;
border: 1px solid blue;
/* https://drafts.csswg.org/css-sizing-4/#stretch-fit-sizing */
width: -moz-available;
width: -webkit-fill-available;
width: stretch;
}
</style>
<body onload="go()">
</body>
</html>

96
tests/wpt/web-platform-tests/css/CSS2/floats/floats-wrap-bfc-with-margin-002-ref.html Normal file
View file

@ -0,0 +1,96 @@
<!DOCTYPE html>
<html class="reftest-wait">
<meta charset="utf-8">
<title>CSS Reference Case</title>
<link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
<script>
const MARGIN_VALS = [-16, -15, -10, -1, 0];
const HORIZ_SIDES = ["left", "right"]; // Used for 'float:*' and 'margin-*'.
const DIRECTION_VALS = ["ltr", "rtl"];
function newDivWithClassAndParent(className, parent) {
let elem = document.createElement("div");
if (className) {
elem.classList.add(className);
}
parent.appendChild(elem);
return elem;
}
function generateGroup(directionVal, floatVal, marginPropSuffix) {
let group = newDivWithClassAndParent("group", document.body);
group.style.direction = directionVal;
const marginPropName = "margin-" + marginPropSuffix;
for (let v of MARGIN_VALS) {
// In this test, none of the MARGIN_VALS are expected to
// make us wrap.
let container = newDivWithClassAndParent("container", group);
if ((floatVal == "right") != (directionVal == "rtl")) {
// In the corresponding piece of the testcase, the float is floated to
// the inline-end side (for the given writing-mode). We use a
// "row-reverse" flex container as our mockup for that here.
container.style.flexDirection = "row-reverse";
}
let float = newDivWithClassAndParent("float", container);
float.style.cssFloat = floatVal;
let bfc = newDivWithClassAndParent("bfc", container);
}
}
function go() {
for (let directionVal of DIRECTION_VALS) {
for (let floatVal of HORIZ_SIDES) {
for (let marginPropSuffix of HORIZ_SIDES) {
generateGroup(directionVal, floatVal, marginPropSuffix);
}
}
}
// Note: the "reftest-wait" usage here isn't strictly necessary; it just
// helps ensure that we actually make it through all of the above JS and
// populate this document with the content that we want to render.
// (Specifically: if we e.g. throw a JS exception somewhere early in both
// the testcase and reference case, then the "reftest-wait" class will
// never be removed; and that will cause the test run to be classified
// as a failure, rather than a trivial "pass" with a visual comparison of
// two blank documents.)
document.documentElement.removeAttribute("class");
}
</script>
<style>
.group {
width: 500px;
border: 1px solid black;
}
.container {
display: inline-flex;
align-content: start;
vertical-align: top;
width: 30px;
height: 40px;
/* This border and margin are just cosmetic, to avoid overlap between
* adjacent containers within a row. */
border: 1px solid gray;
margin-left: 30px;
}
.float {
width: 7px;
height: 8px;
background: fuchsia;
border: 1px solid purple;
margin: 1px 3px 1px 2px;
}
.bfc {
display: flow-root;
background: aqua;
height: 15px;
border: 1px solid blue;
/* We use "flex: 1" (on a flex item) to mock up the fill-available-space
* block-layout behavior in the testcase. */
flex: 1 auto;
}
</style>
<body onload="go()">
</body>
</html>

112
tests/wpt/web-platform-tests/css/CSS2/floats/floats-wrap-bfc-with-margin-002.tentative.html Normal file
View file

@ -0,0 +1,112 @@
<!DOCTYPE html>
<html class="reftest-wait">
<meta charset="utf-8">
<title>CSS Test: If a BFC's inline-axis margin is sufficiently negative such
that it inflates its border-box to be too large to fit alongside a float,
then it should be pushed below the float</title>
<link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
<link rel="help" href="https://www.w3.org/TR/CSS21/visuren.html#floats">
<meta name="assert" content="The border box of ... an element in the normal flow that establishes a new block formatting context ... must not overlap the margin box of any floats in the same block formatting context as the element itself. If necessary, implementations should clear the said element by placing it below any preceding floats">
<link rel="help" href="https://www.w3.org/TR/CSS21/visudet.html#blockwidth">
<!-- For a BFC with 'width:auto', negative total inline-axis margins will
effectively set a lower-bound for the used border-box width, to satisfy
the equation in CSS2.1 10.3.3. This test exercises scenarios where this
mechanism "props up" the BFC's border-box, but not enough to make its
border-box collide width the float's margin-box; so it does not need to
be moved down below the float. -->
<!-- NOTE: Eventually this test might want to merge with the -001 test.
The test logic should be exactly the same, except that here we're testing
some values (in MARGIN_VALS) that aren't currently interoperable, per
the WebKit bug at https://bugs.webkit.org/show_bug.cgi?id=239976 -->
<link rel="match" href="floats-wrap-bfc-with-margin-002-ref.html">
<script>
const MARGIN_VALS = [-16, -15, -10, -1, 0];
const HORIZ_SIDES = ["left", "right"]; // Used for 'float:*' and 'margin-*'.
const DIRECTION_VALS = ["ltr", "rtl"];
function newDivWithClassAndParent(className, parent) {
let elem = document.createElement("div");
if (className) {
elem.classList.add(className);
}
parent.appendChild(elem);
return elem;
}
function generateGroup(directionVal, floatVal, marginPropSuffix) {
let group = newDivWithClassAndParent("group", document.body);
group.style.direction = directionVal;
const marginPropName = "margin-" + marginPropSuffix;
for (let v of MARGIN_VALS) {
let container = newDivWithClassAndParent("container", group);
let float = newDivWithClassAndParent("float", container);
float.style.cssFloat = floatVal;
let bfc = newDivWithClassAndParent("bfc", container);
bfc.style[marginPropName] = v + "px";
}
}
function go() {
for (let directionVal of DIRECTION_VALS) {
for (let floatVal of HORIZ_SIDES) {
for (let marginPropSuffix of HORIZ_SIDES) {
generateGroup(directionVal, floatVal, marginPropSuffix);
}
}
}
// Note: the "reftest-wait" usage here isn't strictly necessary; it just
// helps ensure that we actually make it through all of the above JS and
// populate this document with the content that we want to render.
// (Specifically: if we e.g. throw a JS exception somewhere early in both
// the testcase and reference case, then the "reftest-wait" class will
// never be removed; and that will cause the test run to be classified
// as a failure, rather than a trivial "pass" with a visual comparison of
// two blank documents.)
document.documentElement.removeAttribute("class");
}
</script>
<style>
.group {
width: 500px;
border: 1px solid black;
}
.container {
/* This is the container that holds our float+bfc. We make it an
inline-block so that we can test a bunch of these in a row. */
display: inline-block;
vertical-align: top;
width: 30px;
height: 40px;
/* This border and margin are just cosmetic, to avoid overlap between
* adjacent containers within a row. */
border: 1px solid gray;
margin-left: 30px;
}
.float {
/* We'll set the float property elsewhere (to 'right' or 'left'). */
width: 7px;
height: 8px;
background: fuchsia;
border: 1px solid purple;
/* Each .float's margin-box (which the corresponding .bfc's border-box cannot
* overlap) is 14px wide:
* 7px content + 2px horizontal border + 5px horizontal margin
* Note that we're intentionally using a nonzero 'margin' here, to be sure
* the UA is using the float's margin-box (and not one of its other
* boxes) for this non-overlapping calculation. */
margin: 1px 3px 1px 2px;
}
.bfc {
/* Each .bfc's border-box width is 2px (from the border) plus whatever we
* resolve 'width:auto' to, which is influenced by the particular choice of
* 'margin' values (and the available space). */
display: flow-root;
background: aqua;
height: 15px;
border: 1px solid blue;
}
</style>
<body onload="go()">
</body>
</html>

124
tests/wpt/web-platform-tests/css/CSS2/floats/floats-wrap-bfc-with-margin-003-ref.html Normal file
View file

@ -0,0 +1,124 @@
<!DOCTYPE html>
<html class="reftest-wait">
<meta charset="utf-8">
<title>CSS Reference Case</title>
<link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
<script>
const MARGIN_VALS = [15, 22, 28];
const HORIZ_SIDES = ["left", "right"]; // Used for 'float:*' and 'margin-*'.
const DIRECTION_VALS = ["ltr", "rtl"];
// This comes from .float width + horizontal border and padding:
const FLOAT_MARGIN_BOX_WIDTH = 14;
// This comes from 30 (container) - 14 (float mbox width) - 2 (bfc border):
const AVAIL_WIDTH_NO_WRAPPING = 14;
function newDivWithClassAndParent(className, parent) {
let elem = document.createElement("div");
if (className) {
elem.classList.add(className);
}
parent.appendChild(elem);
return elem;
}
function generateGroup(directionVal, floatVal, marginPropSuffix) {
let group = newDivWithClassAndParent("group", document.body);
group.style.direction = directionVal;
const marginPropName = "margin-" + marginPropSuffix;
for (let v of MARGIN_VALS) {
const isMarginSideFloatSide = (marginPropSuffix == floatVal);
// initial-char comparison to match [l]eft/[l]tr and [r]ight/[r]tl:
const isMarginSideLineStartSide = (marginPropSuffix[0] == directionVal[0]);
const isFloatSideLineStartSide = (floatVal[0] == directionVal[0]);
let container = newDivWithClassAndParent("container", group);
if (!isFloatSideLineStartSide) {
// In the corresponding piece of the testcase, the float is floated to
// the inline-end side (for the given writing-mode). We use a
// "row-reverse" flex container as our mockup for that here.
container.style.flexDirection = "row-reverse";
}
let float = newDivWithClassAndParent("float", container);
let bfc = newDivWithClassAndParent("bfc", container);
// Set the actual margin value that we're testing here, based on which
// case this group is in. See comment in testcase for explanation of the
// three cases.
let marginValToUse;
if (isMarginSideFloatSide) {
// Case (A): in the testcase, the margin simply overlaps the float.
// In our mockup here, they don't actually overlap; so we subtract
// the portion that overlaps in the testcase, which is the float's
// margin-box width:
marginValToUse = v - FLOAT_MARGIN_BOX_WIDTH;
} else if (isMarginSideLineStartSide) {
// Case (B): we push the BFC down below the float (which we emulate
// here with a wrapped flexbox), and we use the full specified margin:
container.style.flexWrap = "wrap";
marginValToUse = v;
} else {
// Case (C): we let the BFC be smooshed against the float, and the
// margin effectively behaves as if it were clamped to the available
// space (so we just clamp it to that value here).
marginValToUse = AVAIL_WIDTH_NO_WRAPPING;
}
bfc.style[marginPropName] = marginValToUse + "px";
}
}
function go() {
for (let directionVal of DIRECTION_VALS) {
for (let floatVal of HORIZ_SIDES) {
for (let marginPropSuffix of HORIZ_SIDES) {
generateGroup(directionVal, floatVal, marginPropSuffix);
}
}
}
// Note: the "reftest-wait" usage here isn't strictly necessary; it just
// helps ensure that we actually make it through all of the above JS and
// populate this document with the content that we want to render.
// (Specifically: if we e.g. throw a JS exception somewhere early in both
// the testcase and reference case, then the "reftest-wait" class will
// never be removed; and that will cause the test run to be classified
// as a failure, rather than a trivial "pass" with a visual comparison of
// two blank documents.)
document.documentElement.removeAttribute("class");
}
</script>
<style>
.group {
width: 300px;
border: 1px solid black;
}
.container {
display: inline-flex;
align-content: start;
vertical-align: top;
width: 30px;
height: 40px;
/* This border and margin are just cosmetic, to avoid overlap between
* adjacent containers within a row. */
border: 1px solid gray;
margin-left: 30px;
}
.float {
width: 7px;
height: 8px;
background: fuchsia;
border: 1px solid purple;
margin: 1px 3px 1px 2px;
}
.bfc {
display: flow-root;
background: aqua;
height: 15px;
border: 1px solid blue;
/* We use "flex: 1" (on a flex item) to mock up the fill-available-space
* block-layout behavior in the testcase. */
flex: 1 auto;
}
</style>
<body onload="go()">
</body>
</html>

147
tests/wpt/web-platform-tests/css/CSS2/floats/floats-wrap-bfc-with-margin-003.tentative.html Normal file
View file

@ -0,0 +1,147 @@
<!DOCTYPE html>
<html class="reftest-wait">
<meta charset="utf-8">
<title>CSS Test: BFCs with large margin, placed next to a float</title>
<link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
<link rel="help" href="https://www.w3.org/TR/CSS21/visuren.html#floats">
<link rel="help" href="https://www.w3.org/TR/CSS21/visudet.html#blockwidth">
<link rel="match" href="floats-wrap-bfc-with-margin-003-ref.html">
<!-- This test exercises the layout of an auto-width BFC with a large positive
margin on one side, positioned alongside a float. (Here, "large" = larger
than the space that's left when the float's width and the BFC's border
are subtracted away from the available space.)
The scenarios here break down into 3 cases, described below as A/B/C with
expected outcomes for each (with expectations based on the observed and
interoperably-implemented behavior of Gecko, WebKit, and Blink, aside
from some known bugs listed further down[1]):
(A) If the BFC's margin is on the same side as the float, then that margin
can simply overlap the float. In this case, nothing needs to overflow or
wrap, and there may even be some space remaining for the BFC's auto-width
content box (rendered as aqua).
(B) If the BFC's margin is on the "line-start" side and the float is on
the "line-end" side, then the BFC's margin pushes it into the float's
margin-box-area such that it impermissably "collides". So, the BFC
instead gets moved down below the float to avoid this collision. With
this moved-down placement, there may be space remaining for the BFC's
auto-width content-box -- precisely the same amount of space as in case A.
(C) If the BFC's margin is on the "line-end" side and the float is on the
"line-start" side, then the BFC is placed adjacent to the float, and its
large margin simply runs off the line-end edge of its containing
block. The BFC's content-box is 0 width (since there's no free space left
over).
Note: the expected-outcome in case B and C feels somewhat asymmetrical,
and in fact Gecko is the only engine that pushes the BFC down in case B.
But Blink/WebKit's alternative behavior for case B involves the BFC
overlapping the float, which clearly violates the spec, as discussed in
their bugs linked below. So I'm making the test expect Gecko's existing
and non-spec-violating behavior for case B, at this point. (I'm guessing
the asymmetry comes from how overflowing margins are handled at the
line-start vs. line-end edge, which makes some sense.)
Here's how this test's groups (black-bordered sections) map to these cases:
* This test's 1st, 4th, 5th, and 8th groups are "case A".
* This test's 3rd and 6th groups are in "case B".
* This test's 2nd and 7th groups are in "case C".
[1] Known bugs referenced above, which cause parts of this test to fail in
WebKit and Blink:
https://bugs.webkit.org/show_bug.cgi?id=240128
https://bugs.chromium.org/p/chromium/issues/detail?id=1322774
https://bugs.chromium.org/p/chromium/issues/detail?id=1323004
-->
<script>
const MARGIN_VALS = [15, 22, 28];
const HORIZ_SIDES = ["left", "right"]; // Used for 'float:*' and 'margin-*'.
const DIRECTION_VALS = ["ltr", "rtl"];
function newDivWithClassAndParent(className, parent) {
let elem = document.createElement("div");
if (className) {
elem.classList.add(className);
}
parent.appendChild(elem);
return elem;
}
function generateGroup(directionVal, floatVal, marginPropSuffix) {
let group = newDivWithClassAndParent("group", document.body);
group.style.direction = directionVal;
const marginPropName = "margin-" + marginPropSuffix;
for (let v of MARGIN_VALS) {
let container = newDivWithClassAndParent("container", group);
let float = newDivWithClassAndParent("float", container);
float.style.cssFloat = floatVal;
let bfc = newDivWithClassAndParent("bfc", container);
bfc.style[marginPropName] = v + "px";
}
}
function go() {
for (let directionVal of DIRECTION_VALS) {
for (let floatVal of HORIZ_SIDES) {
for (let marginPropSuffix of HORIZ_SIDES) {
generateGroup(directionVal, floatVal, marginPropSuffix);
}
}
}
// Note: the "reftest-wait" usage here isn't strictly necessary; it just
// helps ensure that we actually make it through all of the above JS and
// populate this document with the content that we want to render.
// (Specifically: if we e.g. throw a JS exception somewhere early in both
// the testcase and reference case, then the "reftest-wait" class will
// never be removed; and that will cause the test run to be classified
// as a failure, rather than a trivial "pass" with a visual comparison of
// two blank documents.)
document.documentElement.removeAttribute("class");
}
</script>
<style>
.group {
width: 300px;
border: 1px solid black;
}
.container {
/* This is the container that holds our float+bfc. We make it an
inline-block so that we can test a bunch of these in a row. */
display: inline-block;
vertical-align: top;
width: 30px;
height: 40px;
/* This border and margin are just cosmetic, to avoid overlap between
* adjacent containers within a row. */
border: 1px solid gray;
margin-left: 30px;
}
.float {
/* We'll set the float property elsewhere (to 'right' or 'left'). */
width: 7px;
height: 8px;
background: fuchsia;
border: 1px solid purple;
/* Each .float's margin-box (which the corresponding .bfc's border-box cannot
* overlap) is 14px wide:
* 7px content + 2px horizontal border + 5px horizontal margin
* Note that we're intentionally using a nonzero 'margin' here, to be sure
* the UA is using the float's margin-box (and not one of its other
* boxes) for this non-overlapping calculation. */
margin: 1px 3px 1px 2px;
}
.bfc {
/* Each .bfc's border-box width is 2px (from the border) plus whatever we
* resolve 'width:auto' to, which is influenced by the particular choice of
* 'margin' values (and the available space). */
display: flow-root;
background: aqua;
height: 15px;
border: 1px solid blue;
}
</style>
<body onload="go()">
</body>
</html>

10
tests/wpt/web-platform-tests/css/CSS2/floats/floats-wrap-bfc-with-margin-004.html Normal file
View file

@ -0,0 +1,10 @@
<!DOCTYPE html>
<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=1323004">
<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>
<div style="width:100px; height:100px; background:red;">
<div style="display:flow-root; background:green;">
<div style="float:right; width:50px; height:40px;"></div>
<div style="display:flow-root; height:60px; margin-left:51px;"></div>
</div>
</div>

10
tests/wpt/web-platform-tests/css/CSS2/floats/floats-wrap-bfc-with-margin-005.html Normal file
View file

@ -0,0 +1,10 @@
<!DOCTYPE html>
<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=1323004">
<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>
<div style="width:100px; height:100px; background:red;">
<div style="display:flow-root; background:green; direction:rtl;">
<div style="float:left; width:50px; height:40px;"></div>
<div style="display:flow-root; height:60px; margin-right:51px;"></div>
</div>
</div>

16
tests/wpt/web-platform-tests/css/CSS2/linebox/crashtests/dir-change-simplifed-crash.html Normal file
View file

@ -0,0 +1,16 @@
<!DOCTYPE html>
<link rel="help" href="https://drafts.csswg.org/css2/#direction">
<link rel="author" title="Koji Ishii" href="mailto:kojii@chromium.org">
<style>
body, div { position: absolute; }
body { direction: rtl; white-space: pre-line; }
</style>
<body>&#x20;&#x20;&#xA;'123456789<div>&#x20;</div>
<script>
// Force layout and await paint
document.body.offsetLeft;
requestAnimationFrame(() => requestAnimationFrame(() => {
document.querySelector("div").dir = "ltr";
}));
</script>
</body>

4
tests/wpt/web-platform-tests/css/CSS2/linebox/iframe-in-block-in-inline-ref.html Normal file
View file

@ -0,0 +1,4 @@
<!DOCTYPE html>
<div>
<iframe src="support/iframe-inner.html"></iframe>
</div>

9
tests/wpt/web-platform-tests/css/CSS2/linebox/iframe-in-block-in-inline.html Normal file
View file

@ -0,0 +1,9 @@
<!DOCTYPE html>
<link rel="help" href="https://drafts.csswg.org/css2/#inline-boxes">
<link rel="author" href="mailto:kojii@chromium.org">
<link rel="match" href="iframe-in-block-in-inline-ref.html" />
<span>
<div>
<iframe src="support/iframe-inner.html"></iframe>
</div>
</span>

3
tests/wpt/web-platform-tests/css/CSS2/linebox/iframe-in-wrapped-span-ref.html Normal file
View file

@ -0,0 +1,3 @@
<!DOCTYPE html>
<br>
<iframe src="support/iframe-inner.html"></iframe>

8
tests/wpt/web-platform-tests/css/CSS2/linebox/iframe-in-wrapped-span.html Normal file
View file

@ -0,0 +1,8 @@
<!DOCTYPE html>
<link rel="help" href="https://drafts.csswg.org/css2/#inline-boxes">
<link rel="author" href="mailto:kojii@chromium.org">
<link rel="match" href="iframe-in-wrapped-span-ref.html" />
<span>
<br>
<iframe src="support/iframe-inner.html"></iframe>
</span>

10
tests/wpt/web-platform-tests/css/CSS2/linebox/scrollable-overflow.tentative.html
View file

@ -1,10 +0,0 @@
<!DOCTYPE html>
<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=996847">
<link rel="match" href="../../reference/ref-filled-green-100px-square-only.html">
<meta name=assert content="This test checks that bottom half-leading of a line-box doesn't contribute to the scrollable overflow.">
<p>Test passes if there is a filled green square.</p>
<div style="overflow-y: auto; width: 100px; height: 100px;">
<div style="line-height: 120px; height: 100px; background: green;">
<span style="display: inline-block; width: 100px; height: 50px;"></span>
</div>
</div>

2
tests/wpt/web-platform-tests/css/CSS2/linebox/support/iframe-inner.html Normal file
View file

@ -0,0 +1,2 @@
<!DOCTYPE html>
<span style="position: relative">More...</span>

29
tests/wpt/web-platform-tests/css/CSS2/normal-flow/block-in-inline-hittest-001.html Normal file
View file

@ -0,0 +1,29 @@
<!DOCTYPE html>
<meta name="assert" content="Test hit-testing when block-in-inline is in culled inline">
<link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#anonymous-block-level">
<link rel="help" href="https://drafts.csswg.org/cssom-view/#dom-document-elementfrompoint">
<link rel="author" title="Koji Ishii" href="mailto:kojii@chromium.org" />
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<body>
<div>
<span>
<span style="outline: 1px solid blue">
<div id="target">
<div style="width: 64px; height: 26px;">
</div>
</div>
</span>
</span>
</div>
<script>
test(() => {
const target = document.getElementById('target');
const bounds = target.getBoundingClientRect();
const x = bounds.x + bounds.width / 2;
const y = bounds.y + bounds.height / 2;
const result = document.elementFromPoint(x, y);
assert_equals(result, target);
});
</script>
</body>

41
tests/wpt/web-platform-tests/css/CSS2/normal-flow/block-in-inline-hittest-002.html Normal file
View file

@ -0,0 +1,41 @@
<html>
<meta name="assert" content="Test list-based hit-testing for block-in-inline">
<link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#anonymous-block-level">
<link rel="help" href="https://drafts.csswg.org/cssom-view/#dom-document-elementfrompoint">
<link rel="help" href="https://drafts.csswg.org/cssom-view/#dom-document-elementsfrompoint">
<link rel="author" title="Koji Ishii" href="mailto:kojii@chromium.org" />
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<body>
<div>
<a href="#">
<h3 id="target">
text
</h3>
</a>
</div>
<script>
function ancestors(element) {
const list = [];
for (; element; element = element.parentElement)
list.push(element);
return list;
}
const target = document.getElementById('target');
const bounds = target.getBoundingClientRect();
const x = bounds.x + bounds.width / 2;
const y = bounds.y + bounds.height / 2;
test(() => {
const result = document.elementFromPoint(x, y);
assert_equals(result, target);
}, "elementFromPoint");
test(() => {
const results = document.elementsFromPoint(x, y);
assert_array_equals(results, ancestors(target));
}, "elementsFromPoint");
</script>
</body>
</html>

29
tests/wpt/web-platform-tests/css/CSS2/normal-flow/block-in-inline-hittest-float-001.html Normal file
View file

@ -0,0 +1,29 @@
<!DOCTYPE html>
<link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#anonymous-block-level">
<link rel="help" href="https://drafts.csswg.org/cssom-view/#dom-document-elementfrompoint">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<style>
.float {
float: left;
width: 200px;
height: 200px;
background: orange;
}
</style>
<body>
<a id="a" href="#">
<div>
<div id="target" class="float"></div>
</div>
</a>
<script>
test(() => {
const target_bounds = target.getBoundingClientRect();
const target_x = target_bounds.x + (target_bounds.width / 2);
const target_y = target_bounds.y + (target_bounds.height / 2);
const result = document.elementFromPoint(target_x, target_y);
assert_equals(result, target);
});
</script>
</body>

77
tests/wpt/web-platform-tests/css/CSS2/normal-flow/block-in-inline-hittest-float-002.html Normal file
View file

@ -0,0 +1,77 @@
<!DOCTYPE html>
<link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#anonymous-block-level">
<link rel="help" href="https://drafts.csswg.org/cssom-view/#dom-document-elementfrompoint">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<style>
section {
display: flow-root;
}
.float {
float: left;
width: 200px;
height: 20px;
background: orange;
}
.normal {
height: 10px;
background: blue;
}
</style>
<body>
<section>
<a href="#">
<div>
<div class="float"></div>
<div class="normal"></div>
</div>
</a>
</section>
<section title="with background">
<a href="#" style="background: purple">
<div>
<div class="float"></div>
<div class="normal"></div>
</div>
</a>
</section>
<section title="with padding">
<a href="#" style="padding: 1px">
<div>
<div class="float"></div>
<div class="normal"></div>
</div>
</a>
</section>
<section title="floats before block-in-inline">
<div class="float"></div>
<div>
<a href="#">
<div class="normal"></div>
</a>
</div>
</section>
<section title="floats before block-in-inline with background">
<div class="float"></div>
<div>
<a href="#" style="background: purple">
<div class="normal"></div>
</a>
</div>
</section>
<script>
document.body.offsetTop;
for (const section of document.getElementsByTagName('section')) {
test(() => {
const float_element = section.querySelector('.float');
const float_bounds = float_element.getBoundingClientRect();
const normal_element = section.querySelector('.normal');
const normal_bounds = normal_element.getBoundingClientRect();
const x = float_bounds.x + (float_bounds.width / 2);
const y = normal_bounds.y + (normal_bounds.height / 2);
const result = document.elementFromPoint(x, y);
assert_equals(result, float_element);
}, section.title);
}
</script>
</body>

31
tests/wpt/web-platform-tests/css/CSS2/normal-flow/block-in-inline-hittest-margin.html Normal file
View file

@ -0,0 +1,31 @@
<!DOCTYPE html>
<!DOCTYPE html>
<link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#anonymous-block-level">
<link rel="help" href="https://drafts.csswg.org/cssom-view/#dom-document-elementfrompoint">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<style>
.target {
background: blue;
width: 100px;
height: 100px;
margin: 100px;
}
</style>
<body>
<a href="#">
<div class="target"></div>
</a>
<script>
const root = document.body;
const target = root.querySelector('.target');
const target_bounds = target.getBoundingClientRect();
const x = target_bounds.x - 20; // "-20" for the margin area.
const y = target_bounds.y + target_bounds.height / 2;
const result = document.elementFromPoint(x, y);
const a = root.querySelector('a');
test(() => {
assert_equals(result, a);
}, target.style.cssText);
</script>
</body>

69
tests/wpt/web-platform-tests/css/CSS2/normal-flow/block-in-inline-hittest-relpos-zindex.html Normal file
View file

@ -0,0 +1,69 @@
<!DOCTYPE html>
<link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#anonymous-block-level">
<link rel="help" href="https://drafts.csswg.org/cssom-view/#dom-document-elementfrompoint">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<style>
section {
margin-bottom: 5px;
}
.target {
background: blue;
width: 100px;
height: 10px;
}
</style>
<body>
<section>
<a href="#">
<div class="target"></div>
</a>
</section>
<section>
<a href="#">
<div class="target" style="z-index: 1"></div>
</a>
</section>
<section>
<a href="#">
<div class="target" style="z-index: -1"></div>
</a>
</section>
<section>
<a href="#">
<div class="target" style="position: relative"></div>
</a>
</section>
<section>
<a href="#">
<div class="target" style="position: relative; z-index: 1"></div>
</a>
</section>
<section>
<a href="#">
<div class="target" style="position: relative; z-index: -1"></div>
</a>
</section>
<script>
function isAncestorOf(target, ancestor) {
for (; target; target = target.parentElement) {
if (target === ancestor)
return true;
}
return false;
}
for (const root of document.getElementsByTagName('section')) {
const target = root.querySelector('.target');
const target_bounds = target.getBoundingClientRect();
const x = target_bounds.x + target_bounds.width / 2;
const y = target_bounds.y + target_bounds.height / 2;
const result = document.elementFromPoint(x, y);
const a = root.querySelector('a');
test(() => {
// For the `<a>` link to work, the `result` must be `a` or its descendant.
assert_true(isAncestorOf(result, a));
}, target.style.cssText);
}
</script>
</body>

18
tests/wpt/web-platform-tests/css/CSS2/normal-flow/block-in-inline-insert-019-ref.html Normal file
View file

@ -0,0 +1,18 @@
<!DOCTYPE html>
<body>
<section>
<div>1</div>
<span>2</span>
<div class="before">3</div>
</section>
<section>
<span>2</span>
<div class="before">3</div>
<div>4</div>
</section>
<section style="columns: 1">
<div>1</div>
<span>2</span>
<div class="before">3</div>
</section>
</body>

38
tests/wpt/web-platform-tests/css/CSS2/normal-flow/block-in-inline-insert-019.html Normal file
View file

@ -0,0 +1,38 @@
<!DOCTYPE html>
<meta name="assert" content="Test inserting an inline child in the middle of blocks-in-inline">
<link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#anonymous-block-level">
<link ref="match" href="block-in-inline-insert-019-ref.html">
<link rel="author" title="Koji Ishii" href="mailto:kojii@chromium.org">
<body>
<!-- Insert a span in the middle of blocks-in-inline -->
<section>
<span>
<div>1</div>
<div class="before">3</div>
</span>
</section>
<!-- Insert a span before a block-in-inline -->
<section>
<span>
<div class="before">3</div>
<div>4</div>
</span>
</section>
<!-- Check it works in multicol container -->
<section style="columns: 1">
<span>
<div>1</div>
<div class="before">3</div>
</span>
</section>
<script>
(function () {
document.body.offsetTop;
for (const before of document.getElementsByClassName('before')) {
const span = document.createElement('span');
span.textContent = '2';
before.before(span);
}
})();
</script>
</body>

15
tests/wpt/web-platform-tests/css/CSS2/normal-flow/block-in-inline-insert-020-ref.html Normal file
View file

@ -0,0 +1,15 @@
<!DOCTYPE html>
<body>
<section>
<div>1</div>
<span>2</span>
<div class="before" style="position: absolute">3</div>
<div>&nbsp;</div>
</section>
<section>
<div>1</div>
<span>2</span>
<div class="before" style="position: absolute">3</div>
<div class="beforeoof">&nbsp;</div>
</section>
</body>

40
tests/wpt/web-platform-tests/css/CSS2/normal-flow/block-in-inline-insert-020.html Normal file
View file

@ -0,0 +1,40 @@
<!DOCTYPE html>
<meta name="assert" content="Test inserting an inline child before an OOF in blocks-in-inline">
<link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#anonymous-block-level">
<link ref="match" href="block-in-inline-insert-020-ref.html">
<link rel="author" title="Koji Ishii" href="mailto:kojii@chromium.org">
<body>
<section>
<span>
<div>1</div>
<div class="before" style="position: absolute">3</div>
<div>&nbsp;</div>
</span>
</section>
<!-- The OOF was inserted dynamically -->
<section>
<span>
<div>1</div>
<div class="beforeoof">&nbsp;</div>
</span>
</section>
<script>
(function () {
document.body.offsetTop;
for (const before of document.getElementsByClassName('beforeoof')) {
const oof = document.createElement('div');
oof.classList.add('before')
oof.style.position = 'absolute';
oof.textContent = '3';
before.before(oof);
}
document.body.offsetTop;
for (const before of document.getElementsByClassName('before')) {
const span = document.createElement('span');
span.textContent = '2';
before.before(span);
}
})();
</script>
</body>

19
tests/wpt/web-platform-tests/css/CSS2/normal-flow/block-in-inline-vertical-align-001-ref.html Normal file
View file

@ -0,0 +1,19 @@
<!DOCTYPE html>
<style>
div {
line-height: 20px;
}
</style>
<p>The numbers 1, 2 and 3 below should be in ascending order, from top to bottom, with no overlap.</p>
<div>
2
<span style="vertical-align: 20px;">
1
<div>3</div>
4
<div>5</div>
6
<div>7</div>
8
</span>
</div>

35
tests/wpt/web-platform-tests/css/CSS2/normal-flow/block-in-inline-vertical-align-001.html Normal file
View file

@ -0,0 +1,35 @@
<!DOCTYPE html>
<meta name="assert" content="Test `vertical-align` should not affect block-in-inline">
<link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#anonymous-block-level">
<link ref="match" href="block-in-inline-vertical-align-001-ref.html">
<link rel="author" title="Koji Ishii" href="mailto:kojii@chromium.org">
<style>
div {
line-height: 20px;
}
</style>
<p>The numbers 1, 2 and 3 below should be in ascending order, from top to bottom, with no overlap.</p>
<div>
2
<span style="vertical-align: 20px;">
1
</span>
</div>
<div>3</div>
<div>
<span style="vertical-align: 20px;">
4
</span>
</div>
<div>5</div>
<div>
<span style="vertical-align: 20px;">
6
</span>
</div>
<div>7</div>
<div>
<span style="vertical-align: 20px;">
8
</span>
</div>

194
tests/wpt/web-platform-tests/css/CSS2/normal-flow/crashtests/block-in-inline-ax-crash.html Normal file
View file

@ -0,0 +1,194 @@
<style type="text/css">
</style><script type="text/javascript">
var aoScriptElements = document.getElementsByTagName("script");
for(var i = 0; i < aoScriptElements.length; i++) {
aoScriptElements[i].parentNode.removeChild(aoScriptElements[i]);
}
var iCleanup = setInterval(function(){
var oe = document.getElementsByTagName("*");
for (var i = 0; i < oe.length; i++) {
var o = oe.item(i);
if (!o.firstElementChild && o != document.documentElement) {
var c = p = o.parentNode;
p.replaceChild(document.createTextNode("<"+o.tagName+">"+o.textContent+"</"+o.tagName+">"), o)
}
}
});
function event_handler_EC9_load() {
var oElement = event.srcElement;
oElement.insertAdjacentText('beforeend', 'G@82SSS#LLLLLLLLLLLL>[[[[[[[[[a{')
oElement.textContent = '=jjjjjjr>sss(]]]]]]]]f$RRRRRR7qy'
oElement.insertAdjacentText('afterend', '%=Qiiii/m`ppJ[MMMMMMMMMMMMMMM___')
oElement.insertAdjacentElement('beforeend',function(){
return document.createElementNS('http://www.w3.org/2000/svg', 'a');
}())
var oSelection=window.getSelection();
var oRange = oSelection.rangeCount ? oSelection.getRangeAt(23 % oSelection.rangeCount) : null;
var oInsertedElement =function(){
var oNewElement = document.createElementNS('http://www.w3.org/2000/svg', 'cursor');
return oNewElement;
}();
oRange.insertNode(oInsertedElement)
}
document.addEventListener("load", event_handler_EC9_load, true);
function event_handler_ECA_DOMCharacterDataModified() {
var oElement = event.srcElement;
var oParent =function(){
var aoElements = document.getElementsByTagName("*");
if (aoElements.length) return aoElements[38 % aoElements.length];
}();
var oPreviousSibling = oParent.childNodes[31 % oParent.childNodes.length];
oParent.insertBefore(oElement, oPreviousSibling)
var oSelection=window.getSelection();
var oSelectionElement =function(){
var aoElements = document.getElementsByTagName("*");
if (aoElements.length) return aoElements[49 % aoElements.length];
}();
try{oSelection.extend(oSelectionElement, oSelectionElement.textContent.length?48 % oSelectionElement.textContent.length:0)}
catch(e){}
var oRange = oSelection.rangeCount ? oSelection.getRangeAt(20 % oSelection.rangeCount) : null;
var oDocumentFragment = oRange.extractContents()
var oParent =function(){
var aoElements = document.getElementsByTagName("*");
if (aoElements.length) return aoElements[20 % aoElements.length];
}();
oParent.appendChild(oDocumentFragment)
}
document.addEventListener("DOMCharacterDataModified", event_handler_ECA_DOMCharacterDataModified);
var event_handler_ECC_DOMNodeInsertedIntoDocument_active = false;
var event_handler_ECC_DOMNodeInsertedIntoDocument_fired_count = 0;
function event_handler_ECC_DOMNodeInsertedIntoDocument() {
if (event_handler_ECC_DOMNodeInsertedIntoDocument_active) return ;
event_handler_ECC_DOMNodeInsertedIntoDocument_fired_count++;
if (event_handler_ECC_DOMNodeInsertedIntoDocument_fired_count >= 20) return;
event_handler_ECC_DOMNodeInsertedIntoDocument_active = true;
var oElement = event.srcElement;
oElement.outerHTML = ""
if (oElement.parentNode) {
oElement.parentNode.replaceChild((function(){
var aoElements = document.getElementsByTagName("*");
return aoElements[27 % aoElements.length].cloneNode(true);
})(), oElement)
}
var oSelection=window.getSelection();
if (!oSelection.rangeCount) {
document.execCommand("SelectAll")
}
var oRange = oSelection.rangeCount ? oSelection.getRangeAt(82 % oSelection.rangeCount) : null;
var oDocumentFragment = oRange.cloneContents()
var oParent =function(){
var aoElements = document.getElementsByTagName("*");
if (aoElements.length) return aoElements[23 % aoElements.length];
}();
oParent.appendChild(oDocumentFragment)
var oInsertedElement =function(){
var aoElements = document.getElementsByTagName("*");
if (aoElements.length) return aoElements[20 % aoElements.length];
}();
try{oRange.insertNode(oInsertedElement)}
catch(e){}
event_handler_ECC_DOMNodeInsertedIntoDocument_active = false;
}
document.addEventListener("DOMNodeInsertedIntoDocument", event_handler_ECC_DOMNodeInsertedIntoDocument, true);
setTimeout(function(){
var oElement =function(){
var aoElements = document.getElementsByTagName("*");
if (aoElements.length) return aoElements[20 % aoElements.length];
}();
oElement.parentNode.replaceChild((function(){
return document.createElementNS('http://www.w3.org/2000/svg', 'vkern');
})(), oElement)
var oSelection=window.getSelection();
var oElement =function(){
var aoElements = document.getElementsByTagName("*");
if (aoElements.length) return aoElements[54 % aoElements.length];
}();
oElement.normalize()
var oElement =function(){
var aoElements = document.getElementsByTagName("*");
if (aoElements.length) return aoElements[64 % aoElements.length];
}();
oElement.insertAdjacentElement('afterend', document.createElementNS('http://www.w3.org/2000/svg', 'feComponentTransfer'))
oSelection.modify('move', 'backward', 'word')
var oElement =function(){
var aoElements = document.getElementsByTagName("*");
if (aoElements.length) return aoElements[37 % aoElements.length];
}();
oElement.parentNode.removeChild(oElement)
var oElement =function(){
var aoElements = document.getElementsByTagName("*");
if (aoElements.length) return aoElements[3 % aoElements.length];
}();
var oParent =function(){
var aoElements = document.getElementsByTagName("*");
if (aoElements.length) return aoElements[53 % aoElements.length];
}();
var oPreviousSibling = oParent.childNodes[69 % oParent.childNodes.length];
oParent.insertBefore(oElement, oPreviousSibling)
oParent.appendChild(oElement)
});
</script>
<object "NAMEEB">
<ruby="B A">
<rb class="CLASS10 CLASS6" xml:space="preserve">
<textarea classtabindex="-100">
</textarea>
<em class=>
<select "ltr">
<option class="CLASS12 CLASS6" ="disabled">
</select>
<button class="CLASS1 CLASS12"title="x">
<blockquote class= xml:lang="nl">
<div class>
<form >
<div ="preserve">
</form>
<table class="CLASS10"summary="AxBxC b">
</table>
c AxBxC
<ruby class=>
<rbc "preserve">
<rb class="CLASS9" xml:lang="en, nl">
<img class=xml:space="preserve"/>
</rb>
</div>
<h1 class= title="AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA b">
<dfn class>
</dfn>
<form >
<div "en, nl">
<button class="CLASS9" ="ltr">
</button>
<select class="CLASS9 CLASS14"xml:lang="nl">
</select>
<select class= name="NAMEA2">
</select>
<div class>
<textarea "0.5">
</textarea>
</div>
<div class="CLASS7 CLASS13" ="A AxBxC">
</div>
<samp class="CLASS0 CLASS12"dir="ltr">
<textarea class= rows="-1">
</textarea>
</samp>
<ruby class>
</ruby>
<button "disabled">
<div class="CLASS10 CLASS7" ="c A">
<h6 class="CLASS3"xml:space="preserve">
</h6>
<div class=>
<button "en, nl">
<table class="CLASS14" ="1pt">
<caption class="CLASS2" title="b">
<col class/>
<th "rowgroup">
<th class="CLASS2 CLASS11" ="nl">
<textarea class="CLASS12 CLASS10""en, nl">
</textarea>
</table>
</button>
</em>
<select="NAMED1">

4
tests/wpt/web-platform-tests/css/CSS2/normal-flow/resizable-iframe-paint-order-ref.html Normal file
View file

@ -0,0 +1,4 @@
<!DOCTYPE html>
<div style="width: 100px; height: 100px; box-sizing: border-box;
border: 30px solid green; background: lime">
<div>

29
tests/wpt/web-platform-tests/css/CSS2/normal-flow/resizable-iframe-paint-order.html Normal file
View file

@ -0,0 +1,29 @@
<!DOCTYPE html>
<title>Resizable iframe paint order</title>
<link rel="help" href="https://www.w3.org/TR/CSS2/zindex.html">
<link rel="match" href="resizable-iframe-paint-order-ref.html">
<!-- Ignore the resizer which may be visible or invisible depending on
in which paint phase the browser paint the resizer. -->
<meta name="fuzzy" content="0-255;0-200">
<style>
iframe {
display: block;
background: red;
width: 100px;
height: 100px;
padding: 30px;
border: none;
resize: both;
box-sizing: border-box;
}
#negative-margin {
width: 100px;
height: 100px;
background: green;
margin-top: -100px;
}
</style>
<iframe srcdoc="<style>html { background: lime; }</style>"></iframe>
<!-- #negative-margin should paint on top of the background of the iframe
(but not the contents). -->
<div id="negative-margin"></div>

1
tests/wpt/web-platform-tests/css/CSS2/pagination/float-page-break-inside-avoid-2-print-ref.html
View file

@ -6,6 +6,7 @@
<meta name="flags" content="paged">
<style type="text/css">
@page { size:5in 3in; margin:0.5in; }
body { margin: 0 }
p { height: 1in; width: 1in; margin:0; background-color:blue; }
.test { float:left; }
</style>

1
tests/wpt/web-platform-tests/css/CSS2/pagination/float-page-break-inside-avoid-2-print.html
View file

@ -8,6 +8,7 @@
<meta name="flags" content="paged">
<style type="text/css">
@page { size:5in 3in; margin:0.5in; }
body { margin: 0 }
p { height: 1in; width: 1in; margin:0; background-color:blue; }
.test { float:left; page-break-inside:avoid; }
</style>

6
tests/wpt/web-platform-tests/css/CSS2/selectors/first-letter-abspos-ref.html Normal file
View file

@ -0,0 +1,6 @@
<!doctype html>
<title>CSS Test Reference</title>
<style>
span { color: green; }
</style>
<div><span>P</span>ASS</div>

13
tests/wpt/web-platform-tests/css/CSS2/selectors/first-letter-abspos.html Normal file
View file

@ -0,0 +1,13 @@
<!doctype html>
<title>::first-letter doesn't consider an abspos</title>
<meta charset="utf-8">
<link rel="help" href="https://www.w3.org/TR/CSS21/selector.html#first-letter">
<link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1788785">
<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="first-letter-abspos-ref.html">
<style>
div::first-letter { color: green }
span { position: absolute; color: transparent; }
</style>
<div><span>F</span>PASS</div>

2
tests/wpt/web-platform-tests/css/CSS2/stacking-context/opacity-affects-block-in-inline-ref.html Normal file
View file

@ -0,0 +1,2 @@
<!DOCTYPE html>
<div style="width: 100px; height: 100px; background: green; opacity: 0.5;"></div>

6
tests/wpt/web-platform-tests/css/CSS2/stacking-context/opacity-affects-block-in-inline.html Normal file
View file

@ -0,0 +1,6 @@
<!DOCTYPE html>
<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=884236">
<link rel="match" href="opacity-affects-block-in-inline-ref.html">
<span style="opacity: 0.5;">
<div style="width: 100px; height: 100px; background: green;"></div>
</span>

2
tests/wpt/web-platform-tests/css/CSS2/stacking-context/opacity-change-parent-stacking-context-ref.html
View file

@ -3,6 +3,6 @@
<link rel="author" title="Chris Harrelson" href="mailto:chrishtr@chromium.org" />
<div style="width: 100px; height: 100px; background: lightblue; will-change: transform; position: absolute">
<div id=target style="backface-visibility: hidden">
<div style="width: 50px; height: 50px; background: lightgray; top: 75px; position: relative">
<div style="width: 50px; height: 50px; background: lightgray; top: 75px; position: relative"></div>
</div>
</div>

4
tests/wpt/web-platform-tests/css/CSS2/stacking-context/opacity-change-parent-stacking-context.html
View file

@ -7,7 +7,7 @@
<script src="/common/reftest-wait.js"></script>
<div style="width: 100px; height: 100px; background: lightblue; will-change: transform; position: absolute">
<div id=target style="opacity: 0; backface-visibility: hidden">
<div style="width: 50px; height: 50px; background: lightgray; top: 75px; position: relative">
<div style="width: 50px; height: 50px; background: lightgray; top: 75px; position: relative"></div>
</div>
</div>
<script>
@ -18,4 +18,4 @@
}));
}
</script>
</html
</html>

4
tests/wpt/web-platform-tests/css/CSS2/stacking-context/opacity-transition-change-parent-stacking-context-ref.html Normal file
View file

@ -0,0 +1,4 @@
<!doctype HTML>
<title>CSS Test Reference</title>
<link rel="author" title="Philip Rogers" href="mailto:pdr@chromium.org" />
<div style="opacity: 1; width: 100px; height: 100px; background: green;"></div>

21
tests/wpt/web-platform-tests/css/CSS2/stacking-context/opacity-transition-change-parent-stacking-context.html Normal file
View file

@ -0,0 +1,21 @@
<!doctype HTML>
<html class="reftest-wait">
<title>CSS Test: Test for re-paint after stacking context removal due to opacity transition</title>
<link rel="author" title="Philip Rogers" href="mailto:pdr@chromium.org" />
<link rel="help" href="https://www.w3.org/TR/CSS2/zindex.html">
<link rel="match" href="opacity-transition-change-parent-stacking-context-ref.html">
<script src="/common/reftest-wait.js"></script>
<div style="position: relative;">
<div id=target style="transition:.00001s ease; opacity: 0; backface-visibility: hidden; width: 100px; height: 100px; background: green;"></div>
</div>
<script>
onload = function() {
requestAnimationFrame(() => requestAnimationFrame(() => {
target.style.opacity = 1;
requestAnimationFrame(() => {
takeScreenshot();
});
}));
}
</script>
</html>

2
tests/wpt/web-platform-tests/css/CSS2/stacking-context/zindex-affects-block-in-inline-ref.html Normal file
View file

@ -0,0 +1,2 @@
<!DOCTYPE html>
<div style="background: green; width: 100px; height: 100px;"></div>

7
tests/wpt/web-platform-tests/css/CSS2/stacking-context/zindex-affects-block-in-inline.html Normal file
View file

@ -0,0 +1,7 @@
<!DOCTYPE html>
<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=764458">
<link rel="match" href="zindex-affects-block-in-inline-ref.html">
<div style="position: relative; z-index: 1; background: red; width: 100px; height: 100px;"></div>
<span style="position: relative; z-index: 2; top: -100px;">
<div style="background: green; width: 100px; height: 100px;"></div>
</span>

52
tests/wpt/web-platform-tests/css/CSS2/text/text-align-white-space-007.xht
View file

@ -1,52 +0,0 @@
<!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 set to 'justify' with 'white-space' set to 'pre-wrap' and 'direction' set to 'rtl'</title>
<link rel="author" title="Microsoft" href="http://www.microsoft.com/" />
<link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2012-06-28 -->
<link rel="help" href="http://www.w3.org/TR/CSS21/text.html#alignment-prop" />
<link rel="match" href="text-align-white-space-002-ref.xht" />
<meta name="flags" content="ahem may" /> <!-- "may" because level 3 makes it no longer mandatory -->
<link rel="help" href="https://drafts.csswg.org/css-text-3/#text-align-property" />
<meta name="assert" content="Setting 'text-align' to 'justify' and 'white-space' to 'pre-wrap', text-align is computed to its initial value." />
<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
<style type="text/css">
div
{
direction: rtl;
font: 20px/1 Ahem;
position: relative;
width: 9em;
}
div div
{
position: absolute;
}
#test
{
color: green;
text-align: justify;
white-space: pre-wrap;
}
.red
{
color: red;
}
.green
{
color: green;
}
</style>
</head>
<body>
<p>Test passes if there is <strong>no red</strong>.</p>
<div>
<div><span class="green">x</span><span class="red">xxx</span><span class="green">x</span><span class="red">xxx</span><span class="green">x</span>
<span class="green">x</span><span class="red">xxx</span><span class="green">x</span><span class="red">xxx</span><span class="green">x</span>
<span class="green">x</span><span class="red">xxx</span><span class="green">x</span><span class="red">xxx</span><span class="green">x</span>
<span class="green">xx</span><span class="red">xxx</span><span class="green">x</span><span class="red">xxx</span></div>
<div id="test">XXX XXX XXX XXX XXX XXX XXX XXX</div>
</div>
</body>
</html>