mirror of
https://github.com/servo/servo.git
synced 2025-08-07 14:35:33 +01:00
Update web-platform-tests to revision a5cb9597799c5f9bf0a809006161a0c50055828f
This commit is contained in:
WPT Sync Bot
parent
8b56b7a3c2
commit
2a42c14544
646 changed files with 93200 additions and 2587 deletions
|
|
@ -0,0 +1,118 @@
|
|||
<!doctype HTML>
|
||||
<link rel="author" title="Chris Harrelson" href="mailto:chrishtr@chromium.org">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-transforms-2/">
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
|
||||
<style>
|
||||
div {
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
}
|
||||
|
||||
.rotate45 {
|
||||
transform: rotateY(45deg)
|
||||
}
|
||||
.rotateNeg45 {
|
||||
transform: rotateY(-45deg)
|
||||
}
|
||||
|
||||
.parent {
|
||||
transform-style: preserve-3d;
|
||||
}
|
||||
|
||||
.perspective {
|
||||
perspective: 200px;
|
||||
}
|
||||
</style>
|
||||
|
||||
<div class="parent rotateNeg45">
|
||||
<div id=childOfPreserve3D class="child rotate45"></div>
|
||||
</div>
|
||||
|
||||
<div class="parent rotateNeg45">
|
||||
<div id=absChildOfPreserve3D class="child rotate45" style="position: absolute"></div>
|
||||
</div>
|
||||
|
||||
<div class="parent rotateNeg45">
|
||||
<div id=fixedChildOfPreserve3D class="child rotate45" style="position: absolute"></div>
|
||||
</div>
|
||||
|
||||
<div class="parent rotateNeg45">
|
||||
<div>
|
||||
<div id=childWithIntermediate class="child rotate45" style="position: absolute"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="parent rotateNeg45">
|
||||
<div>
|
||||
<div id=absWithIntermediate class="child rotate45" style="position: absolute"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="parent rotateNeg45">
|
||||
<div>
|
||||
<div id=fixedWithIntermediate class="child rotate45" style="position: fixed"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="perspective">
|
||||
<div id=childWithPerspectiveParent class="child rotate45" style="position: absolute"></div>
|
||||
<div id=absWithPerspectiveParent class="child rotate45" style="position: absolute"></div>
|
||||
<div id=fixedWithPerspectiveParent class="child rotate45" style="position: fixed"></div>
|
||||
</div>
|
||||
|
||||
<div class="perspective">
|
||||
<div>
|
||||
<div id=childWithIntermediateAndPerspectiveParent class="child rotate45"></div>
|
||||
<div id=absWithIntermediateAndPerspectiveParent class="child rotate45" style="position: absolute"></div>
|
||||
<div id=fixedWithIntermediateAndPerspectiveParent class="child rotate45" style="position: fixed"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
test(function() {
|
||||
assert_equals(childOfPreserve3D.getBoundingClientRect().width, 200);
|
||||
assert_equals(absChildOfPreserve3D.getBoundingClientRect().width, 200);
|
||||
assert_equals(fixedChildOfPreserve3D.getBoundingClientRect().width, 200);
|
||||
}, "Direct DOM parent is root of rendering context");
|
||||
|
||||
test(function() {
|
||||
assert_equals(childWithIntermediate.getBoundingClientRect().width, 200);
|
||||
assert_equals(absWithIntermediate.getBoundingClientRect().width, 200);
|
||||
assert_equals(fixedWithIntermediate.getBoundingClientRect().width, 200);
|
||||
}, "Intermediate DOM nodes cause rendering context to end");
|
||||
|
||||
test(function() {
|
||||
assert_approx_equals(
|
||||
childWithPerspectiveParent.getBoundingClientRect().width, 161, 1);
|
||||
}, "Perspective applies to direct DOM normal-flow children");
|
||||
|
||||
test(function() {
|
||||
assert_approx_equals(
|
||||
absWithPerspectiveParent.getBoundingClientRect().width, 161, 1);
|
||||
}, "Perspective applies to direct DOM abs-pos children");
|
||||
|
||||
test(function() {
|
||||
assert_approx_equals(
|
||||
fixedWithPerspectiveParent.getBoundingClientRect().width, 161, 1);
|
||||
}, "Perspective applies to direct DOM fixed-pos children");
|
||||
|
||||
test(function() {
|
||||
assert_approx_equals(
|
||||
childWithIntermediateAndPerspectiveParent.getBoundingClientRect().width,
|
||||
141, 1);
|
||||
}, "Perspective does not apply to DOM normal-flow grandchildren");
|
||||
|
||||
test(function() {
|
||||
assert_approx_equals(
|
||||
absWithIntermediateAndPerspectiveParent.getBoundingClientRect().width,
|
||||
141, 1);
|
||||
}, "Perspective does not apply to DOM abs-pos grandchildren");
|
||||
|
||||
test(function() {
|
||||
assert_approx_equals(
|
||||
fixedWithIntermediateAndPerspectiveParent.getBoundingClientRect().width,
|
||||
141, 1);
|
||||
}, "Perspective does not apply to DOM fixed-pos grandchildren");
|
||||
</script>
|
||||
|
|
@ -0,0 +1,15 @@
|
|||
<!DOCTYPE html>
|
||||
<title>backface visibility: hidden self-transform</title>
|
||||
<link rel="author" title="Chris Harrelson" href="mailto:chrishtr@chromium.org">
|
||||
<link rel="help" href="http://www.w3.org/TR/css-transforms-1/#transform-property">
|
||||
<link rel="help" href="http://www.w3.org/TR/css-transforms-2/#propdef-backface-visibility">
|
||||
|
||||
<p>The test passes if there is a green rectangle and no red.</p>
|
||||
<style>
|
||||
div {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
}
|
||||
</style>
|
||||
<div style="backface-visibility:hidden"></div>
|
||||
<div style="background: green"></div>
|
||||
|
|
@ -0,0 +1,19 @@
|
|||
<!DOCTYPE html>
|
||||
<title>backface visibility: hidden self-transform</title>
|
||||
<link rel="author" title="Chris Harrelson" href="mailto:chrishtr@chromium.org">
|
||||
<link rel="help" href="http://www.w3.org/TR/css-transforms-1/#transform-property">
|
||||
<link rel="help" href="http://www.w3.org/TR/css-transforms-2/#propdef-backface-visibility">
|
||||
<link rel="match" href="backface-visibility-hidden-002-ref.html">
|
||||
|
||||
<p>The test passes if there is a green rectangle and no red.</p>
|
||||
<style>
|
||||
div {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
}
|
||||
.target {
|
||||
transform: rotateY(180deg);
|
||||
}
|
||||
</style>
|
||||
<div class=target style="backface-visibility: hidden; background: red"></div>
|
||||
<div class=target style="background: green"></div>
|
||||
|
|
@ -0,0 +1,21 @@
|
|||
<!DOCTYPE html>
|
||||
<title>backface visibility: hidden applies to pseudo-stacking contexts</title>
|
||||
<link rel="author" title="Chris Harrelson" href="mailto:chrishtr@chromium.org">
|
||||
<link rel="help" href="http://www.w3.org/TR/css-transforms-1/#transform-property">
|
||||
<link rel="help" href="http://www.w3.org/TR/css-transforms-2/#propdef-backface-visibility">
|
||||
|
||||
<p>The test passes if there is a green rectangle and no red</p>
|
||||
<style>
|
||||
div {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
}
|
||||
.target {
|
||||
transform: rotateY(180deg);
|
||||
}
|
||||
</style>
|
||||
<div class=target style="backface-visibility: hidden">
|
||||
</div>
|
||||
<div class=target>
|
||||
<div style="background: green"></div>
|
||||
</div>
|
||||
|
|
@ -0,0 +1,23 @@
|
|||
<!DOCTYPE html>
|
||||
<title>backface visibility: hidden applies to pseudo-stacking contexts</title>
|
||||
<link rel="author" title="Chris Harrelson" href="mailto:chrishtr@chromium.org">
|
||||
<link rel="help" href="http://www.w3.org/TR/css-transforms-1/#transform-property">
|
||||
<link rel="help" href="http://www.w3.org/TR/css-transforms-2/#propdef-backface-visibility">
|
||||
<link rel="match" href="backface-visibility-hidden-003-ref.html">
|
||||
|
||||
<p>The test passes if there is a green rectangle and no red</p>
|
||||
<style>
|
||||
div {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
}
|
||||
.target {
|
||||
transform: rotateY(180deg);
|
||||
}
|
||||
</style>
|
||||
<div class=target style="backface-visibility: hidden">
|
||||
<div style="background: red"></div>
|
||||
</div>
|
||||
<div class=target>
|
||||
<div style="background: green"></div>
|
||||
</div>
|
||||
|
|
@ -0,0 +1,16 @@
|
|||
<!DOCTYPE html>
|
||||
<title>backface visibility: hidden does not apply to child pseudo-stacking contexts</title>
|
||||
<link rel="author" title="Chris Harrelson" href="mailto:chrishtr@chromium.org">
|
||||
<link rel="help" href="http://www.w3.org/TR/css-transforms-1/#transform-property">
|
||||
<link rel="help" href="http://www.w3.org/TR/css-transforms-2/#propdef-backface-visibility">
|
||||
|
||||
<p>The test passes if there is a green rectangle and no red</p>
|
||||
<style>
|
||||
div {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
}
|
||||
</style>
|
||||
<div class=target style="backface-visibility: hidden">
|
||||
<div style="background: green; isolation: isolate"></div>
|
||||
</div>
|
||||
|
|
@ -0,0 +1,20 @@
|
|||
<!DOCTYPE html>
|
||||
<title>backface visibility: hidden does not apply to child pseudo-stacking context descendants</title>
|
||||
<link rel="author" title="Chris Harrelson" href="mailto:chrishtr@chromium.org">
|
||||
<link rel="help" href="http://www.w3.org/TR/css-transforms-1/#transform-property">
|
||||
<link rel="help" href="http://www.w3.org/TR/css-transforms-2/#propdef-backface-visibility">
|
||||
<link rel="match" href="backface-visibility-hidden-004-ref.html">
|
||||
|
||||
<p>The test passes if there is a green rectangle and no red</p>
|
||||
<style>
|
||||
div {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
}
|
||||
.target {
|
||||
transform: rotateY(180deg);
|
||||
}
|
||||
</style>
|
||||
<div class=target style="backface-visibility: hidden">
|
||||
<div style="background: green; isolation: isolate"></div>
|
||||
</div>
|
||||
|
|
@ -0,0 +1,18 @@
|
|||
<!DOCTYPE html>
|
||||
<title>backface visibility: hidden inside preserve-3d applies to pseudo-stacking contexts</title>
|
||||
<link rel="author" title="Chris Harrelson" href="mailto:chrishtr@chromium.org">
|
||||
<link rel="help" href="http://www.w3.org/TR/css-transforms-1/#transform-property">
|
||||
<link rel="help" href="http://www.w3.org/TR/css-transforms-2/#propdef-backface-visibility">
|
||||
|
||||
<p>The test passes if there is a green rectangle and no red</p>
|
||||
<style>
|
||||
div {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
}
|
||||
</style>
|
||||
<div style="transform-style: preserve-3d">
|
||||
<div class=target style="backface-visibility: hidden">
|
||||
<div style="background: green; isolation: isolate"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -0,0 +1,22 @@
|
|||
<!DOCTYPE html>
|
||||
<title>backface visibility: hidden inside preserve-3d does not apply to pseudo-stacking context descendants</title>
|
||||
<link rel="author" title="Chris Harrelson" href="mailto:chrishtr@chromium.org">
|
||||
<link rel="help" href="http://www.w3.org/TR/css-transforms-1/#transform-property">
|
||||
<link rel="help" href="http://www.w3.org/TR/css-transforms-2/#propdef-backface-visibility">
|
||||
<link rel="match" href="backface-visibility-hidden-005-ref.html">
|
||||
|
||||
<p>The test passes if there is a green rectangle and no red</p>
|
||||
<style>
|
||||
div {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
}
|
||||
.target {
|
||||
transform: rotateY(180deg);
|
||||
}
|
||||
</style>
|
||||
<div style="transform-style: preserve-3d">
|
||||
<div class=target style="backface-visibility: hidden; transform-style: preserve-3d">
|
||||
<div style="background: green; isolation: isolate; "></div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -0,0 +1,25 @@
|
|||
<!DOCTYPE html>
|
||||
<title>backface visibility: hidden does not apply to child pseudo-stacking context descendants, even when animation is present</title>
|
||||
<link rel="author" title="Chris Harrelson" href="mailto:chrishtr@chromium.org">
|
||||
<link rel="help" href="http://www.w3.org/TR/css-transforms-1/#transform-property">
|
||||
<link rel="help" href="http://www.w3.org/TR/css-transforms-2/#propdef-backface-visibility">
|
||||
<link rel="match" href="backface-visibility-hidden-004-ref.html">
|
||||
|
||||
<p>The test passes if there is a green rectangle and no red</p>
|
||||
<style>
|
||||
|
||||
div {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
}
|
||||
@keyframes spin {
|
||||
from { transform: rotateY(180deg); }
|
||||
to { transform: rotateY(180deg); }
|
||||
}
|
||||
.target {
|
||||
animation: 10000s linear 0s 1 forwards spin;
|
||||
}
|
||||
</style>
|
||||
<div class=target style="backface-visibility: hidden">
|
||||
<div style="background: green; isolation: isolate"></div>
|
||||
</div>
|
||||
|
|
@ -9,7 +9,7 @@
|
|||
<div style="transform: rotateY(180deg); overflow: hidden; width: 100px">
|
||||
<div style="width: 100px; height: 100px; background: green; will-change: transform"></div>
|
||||
</div>
|
||||
<div style="transform: rotateY(180deg); overflow: hidden; width: 100px; backface-visibility: hidden">
|
||||
<div style="width: 100px; height: 100px; background: red; will-change: transform"></div>
|
||||
<div style="transform: rotateY(180deg); overflow: hidden; width: 100px;
|
||||
height: 100px; background: red; backface-visibility: hidden"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,124 @@
|
|||
<!doctype HTML>
|
||||
<link rel="author" title="Chris Harrelson" href="mailto:chrishtr@chromium.org">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-transforms-2/#grouping-property-values">
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
|
||||
<style>
|
||||
div {
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
}
|
||||
.parent {
|
||||
transform-style: preserve-3d;
|
||||
transform: rotateY(45deg)
|
||||
}
|
||||
|
||||
.child {
|
||||
transform: rotateY(45deg);
|
||||
background: lightblue
|
||||
}
|
||||
</style>
|
||||
|
||||
<div class=parent>
|
||||
<div id=nonflat class=child></div>
|
||||
</div>
|
||||
|
||||
<div class=parent style="opacity: 0.5">
|
||||
<div id=opacity class=child></div>
|
||||
</div>
|
||||
|
||||
<div class=parent style="overflow: hidden">
|
||||
<div id=overflowClip class=child></div>
|
||||
</div>
|
||||
|
||||
<div class=parent style="filter: invert(0)">
|
||||
<div id=filter class=child></div>
|
||||
</div>
|
||||
|
||||
<div class=parent style="backdrop-filter: invert(0)">
|
||||
<div id=backdropFilter class=child></div>
|
||||
</div>
|
||||
|
||||
<div class=parent style="mix-blend-mode: multiply;">
|
||||
<div id=mixBlendMode class=child></div>
|
||||
</div>
|
||||
|
||||
<div class=parent style="clip: rect(1px, 2px, 3px, 4px); position: absolute">
|
||||
<div id=cssClip class=child></div>
|
||||
</div>
|
||||
|
||||
<div class=parent style="clip-path: circle(40%)">
|
||||
<div id=clipPath class=child></div>
|
||||
</div>
|
||||
|
||||
<div class=parent style="isolation: isolate">
|
||||
<div id=isolation class=child></div>
|
||||
</div>
|
||||
|
||||
<div class=parent style="-webkit-mask:linear-gradient(black,transparent);
|
||||
mask:linear-gradient(black,transparent)">
|
||||
<div id=mask class=child></div>
|
||||
</div>
|
||||
|
||||
<div id=parentWithGrouping style="transform-style: preserve-3d; overflow: hidden">
|
||||
<div id=absoluteUnderGrouping style="position: absolute">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id=parentWithoutGrouping style="transform-style: preserve-3d">
|
||||
<div id=absoluteNotUnderGrouping style="position: absolute">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
nonflatWidth = nonflat.getBoundingClientRect().width;
|
||||
|
||||
test(function() {
|
||||
assert_equals(nonflat.getBoundingClientRect().width, nonflatWidth);
|
||||
}, "Preserve-3d element not flattened");
|
||||
|
||||
test(function() {
|
||||
assert_not_equals(opacity.getBoundingClientRect().width, nonflatWidth);
|
||||
}, "Preserve-3d element flattened due to opacity");
|
||||
|
||||
test(function() {
|
||||
assert_not_equals(overflowClip.getBoundingClientRect().width, nonflatWidth);
|
||||
}, "Preserve-3d element flattened due to overflow clip");
|
||||
|
||||
test(function() {
|
||||
assert_not_equals(filter.getBoundingClientRect().width, nonflatWidth);
|
||||
}, "Preserve-3d element flattened due to filter");
|
||||
|
||||
test(function() {
|
||||
assert_not_equals(backdropFilter.getBoundingClientRect().width, nonflatWidth);
|
||||
}, "Preserve-3d element flattened due to backdrop-filter");
|
||||
|
||||
test(function() {
|
||||
assert_not_equals(mixBlendMode.getBoundingClientRect().width), nonflatWidth;
|
||||
}, "Preserve-3d element flattened due to mix-blend-mode");
|
||||
|
||||
test(function() {
|
||||
assert_not_equals(cssClip.getBoundingClientRect().width, nonflatWidth);
|
||||
}, "Preserve-3d element flattened due to clip CSS");
|
||||
|
||||
test(function() {
|
||||
assert_not_equals(clipPath.getBoundingClientRect().width, nonflatWidth);
|
||||
}, "Preserve-3d element flattened due to clip-path");
|
||||
|
||||
test(function() {
|
||||
assert_not_equals(isolation.getBoundingClientRect().width, nonflatWidth);
|
||||
}, "Preserve-3d element flattened due to isolation");
|
||||
|
||||
test(function() {
|
||||
assert_not_equals(mask.getBoundingClientRect().width, nonflatWidth);
|
||||
}, "Preserve-3d element flattened due to mask");
|
||||
|
||||
test(function() {
|
||||
assert_equals(absoluteUnderGrouping.offsetParent, parentWithGrouping);
|
||||
}, "Preserve-3d element with a grouping property still a containing block");
|
||||
|
||||
test(function() {
|
||||
assert_equals(absoluteNotUnderGrouping.offsetParent, parentWithoutGrouping);
|
||||
}, "Preserve-3d element without a grouping property still a containing block");
|
||||
</script>
|
||||
Loading…
Add table
Add a link
Reference in a new issue