mirror of
https://github.com/servo/servo.git
synced 2025-08-23 14:25:33 +01:00
Update web-platform-tests to revision 6340a70e8df5e850ea44436b54105f59dd5aa22e
This commit is contained in:
WPT Sync Bot
parent
5788e8c050
commit
7be3e2f06b
131 changed files with 3893 additions and 1852 deletions
|
|
@ -0,0 +1,20 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset=utf-8>
|
||||
<title>CSS Floats — reference</title>
|
||||
<link rel=author title="Jonathan Kew" href="jkew@mozilla.com">
|
||||
<style>
|
||||
p { width: 10em; border: solid aqua; }
|
||||
span { float: left; width: 5em; height: 5em; border: solid blue; }
|
||||
</style>
|
||||
|
||||
<div>Test passes if all three examples render the same:</div>
|
||||
|
||||
<p><span></span><br>Supercalifragilisticexpialidocious</p>
|
||||
|
||||
<br style="clear:both">
|
||||
|
||||
<p><span></span><br>Supercalifragilisticexpialidocious</p>
|
||||
|
||||
<br style="clear:both">
|
||||
|
||||
<p><span></span><br>Supercalifragilisticexpialidocious</p>
|
||||
|
|
@ -0,0 +1,23 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset=utf-8>
|
||||
<title>CSS Floats — narrow containing block</title>
|
||||
<meta name=assert content="If a shortened line box is too small to contain any content, then the line box is shifted downward">
|
||||
<link rel=help href="https://www.w3.org/TR/CSS2/visuren.html#floats">
|
||||
<link rel=match href="float-no-content-beside-001-ref.html">
|
||||
<link rel=author title="Jonathan Kew" href="jkew@mozilla.com">
|
||||
<style>
|
||||
p { width: 10em; border: solid aqua; }
|
||||
span { float: left; width: 5em; height: 5em; border: solid blue; }
|
||||
</style>
|
||||
|
||||
<div>Test passes if all three examples render the same:</div>
|
||||
|
||||
<p><span></span>Supercalifragilisticexpialidocious</p>
|
||||
|
||||
<br style="clear:both">
|
||||
|
||||
<p><span></span> Supercalifragilisticexpialidocious</p>
|
||||
|
||||
<br style="clear:both">
|
||||
|
||||
<p><span></span><br>Supercalifragilisticexpialidocious</p>
|
||||
|
|
@ -0,0 +1,46 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Box Alignment Level 3: getComputedStyle().placeContent</title>
|
||||
<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-place-content">
|
||||
<meta name="assert" content="place-content computed value is as specified.">
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<script src="/css/support/computed-testcommon.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<div id="target"></div>
|
||||
<script>
|
||||
test_computed_value("place-content", "normal normal", "normal");
|
||||
|
||||
test_computed_value("place-content", "first baseline", "baseline start");
|
||||
test_computed_value("place-content", "baseline", "baseline start");
|
||||
test_computed_value("place-content", "first baseline start", "baseline start");
|
||||
test_computed_value("place-content", "last baseline", "last baseline start");
|
||||
test_computed_value("place-content", "first baseline stretch", "baseline stretch");
|
||||
test_computed_value("place-content", "last baseline flex-start");
|
||||
|
||||
test_computed_value("place-content", "baseline stretch");
|
||||
|
||||
test_computed_value("place-content", "space-between");
|
||||
test_computed_value("place-content", "space-around");
|
||||
test_computed_value("place-content", "space-evenly");
|
||||
test_computed_value("place-content", "stretch");
|
||||
|
||||
test_computed_value("place-content", "center");
|
||||
test_computed_value("place-content", "end");
|
||||
test_computed_value("place-content", "flex-start flex-start", "flex-start");
|
||||
test_computed_value("place-content", "unsafe end unsafe end", "unsafe end");
|
||||
test_computed_value("place-content", "safe flex-start");
|
||||
|
||||
test_computed_value("place-content", "normal stretch");
|
||||
test_computed_value("place-content", "baseline space-around");
|
||||
test_computed_value("place-content", "space-evenly unsafe end");
|
||||
test_computed_value("place-content", "center normal");
|
||||
|
||||
test_computed_value("place-content", "normal right");
|
||||
test_computed_value("place-content", "baseline unsafe left");
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,52 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Box Alignment Level 3: getComputedStyle().placeItems</title>
|
||||
<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-place-items">
|
||||
<meta name="assert" content="place-items computed value is as specified.">
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<script src="/css/support/computed-testcommon.js"></script>
|
||||
<style>
|
||||
#grandparent {
|
||||
justify-items: legacy center;
|
||||
}
|
||||
#parent {
|
||||
justify-items: legacy;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div id="grandparent">
|
||||
<div id="parent">
|
||||
<div id="target"></div>
|
||||
</div>
|
||||
<script>
|
||||
test_computed_value("place-items", "normal");
|
||||
test_computed_value("place-items", "stretch stretch", "stretch");
|
||||
|
||||
test_computed_value("place-items", "first baseline", "baseline");
|
||||
test_computed_value("place-items", "last baseline last baseline", "last baseline");
|
||||
|
||||
test_computed_value("place-items", "center");
|
||||
test_computed_value("place-items", "end end", "end");
|
||||
test_computed_value("place-items", "self-start");
|
||||
test_computed_value("place-items", "flex-end");
|
||||
test_computed_value("place-items", "unsafe center unsafe center", "unsafe center");
|
||||
test_computed_value("place-items", "safe self-end");
|
||||
|
||||
test_computed_value("place-items", "stretch baseline");
|
||||
test_computed_value("place-items", "last baseline center");
|
||||
test_computed_value("place-items", "safe self-end normal");
|
||||
|
||||
test_computed_value("place-items", "normal right");
|
||||
test_computed_value("place-items", "baseline unsafe left");
|
||||
|
||||
// When specified justify-items is legacy, computed value depends on inherited value.
|
||||
test_computed_value("place-items", "flex-end legacy", "flex-end legacy center");
|
||||
test_computed_value("place-items", "stretch legacy left");
|
||||
test_computed_value("place-items", "first baseline right legacy", "baseline legacy right");
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,37 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Box Alignment Level 3: getComputedStyle().placeSelf</title>
|
||||
<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-place-self">
|
||||
<meta name="assert" content="place-self computed value is as specified.">
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<script src="/css/support/computed-testcommon.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<div id="target"></div>
|
||||
<script>
|
||||
test_computed_value("place-self", "auto auto", "auto");
|
||||
test_computed_value("place-self", "normal");
|
||||
test_computed_value("place-self", "stretch");
|
||||
|
||||
test_computed_value("place-self", "first baseline", "baseline");
|
||||
test_computed_value("place-self", "last baseline last baseline", "last baseline");
|
||||
|
||||
test_computed_value("place-self", "center center", "center");
|
||||
test_computed_value("place-self", "start");
|
||||
test_computed_value("place-self", "self-start");
|
||||
test_computed_value("place-self", "flex-end");
|
||||
test_computed_value("place-self", "unsafe center");
|
||||
test_computed_value("place-self", "safe self-end safe self-end", "safe self-end");
|
||||
|
||||
test_computed_value("place-self", "auto last baseline");
|
||||
test_computed_value("place-self", "baseline flex-end");
|
||||
test_computed_value("place-self", "unsafe center stretch");
|
||||
|
||||
test_computed_value("place-self", "normal right");
|
||||
test_computed_value("place-self", "baseline unsafe left");
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -36,6 +36,8 @@ function checkPlaceShorhand(shorthand, shorthandValue, alignValue, justifyValue)
|
|||
|
||||
var resolvedValue = getComputedStyle(div).getPropertyValue(shorthand);
|
||||
var expectedResolvedValue = (alignValue + " " + justifyValue).trim();
|
||||
if (alignValue === justifyValue)
|
||||
expectedResolvedValue = alignValue;
|
||||
|
||||
assert_equals(div.style[shorthand], specifiedValue, shorthandValue + " specified value");
|
||||
// FIXME: We need https://github.com/w3c/csswg-drafts/issues/1041 to clarify which
|
||||
|
|
|
|||
|
|
@ -0,0 +1,16 @@
|
|||
<!doctype html>
|
||||
<title>CSS test reference</title>
|
||||
<link rel="author" title="Emilio Cobos Álvarez" href="mailto:emilio@crisal.io">
|
||||
<style>
|
||||
.test {
|
||||
display: flex;
|
||||
}
|
||||
.test::before {
|
||||
content: "";
|
||||
display: block;
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
background-color: green;
|
||||
}
|
||||
</style>
|
||||
<div class="test"></div>
|
||||
|
|
@ -0,0 +1,37 @@
|
|||
<!doctype html>
|
||||
<meta charset=utf-8>
|
||||
<title>Animation of pseudo-element is stopped properly in presence of dynamic DOM change that reconstructs the layout tree</title>
|
||||
<link rel="author" title="Emilio Cobos Álvarez" href="mailto:emilio@crisal.io">
|
||||
<link rel="author" title="Mozilla" href="https://mozilla.org">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-animations/">
|
||||
<link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1564366">
|
||||
<link rel="match" href="animation-pseudo-dynamic-001-ref.html">
|
||||
<style>
|
||||
@keyframes anim {
|
||||
from { background-color: red }
|
||||
to { background-color: red }
|
||||
}
|
||||
.test {
|
||||
display: flex;
|
||||
}
|
||||
.test::before {
|
||||
content: "";
|
||||
display: block;
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
background-color: green;
|
||||
}
|
||||
.tweak::before {
|
||||
animation: anim 2s linear infinite;
|
||||
}
|
||||
</style>
|
||||
<div class="test tweak">foo</div>
|
||||
<script>
|
||||
onload = function() {
|
||||
const div = document.querySelector(".test");
|
||||
const pseudoStyle = getComputedStyle(div, "::before");
|
||||
div.getBoundingClientRect(); // update layout
|
||||
div.classList.remove("tweak");
|
||||
div.innerHTML = ""; // This is necessary to trigger the bug.
|
||||
}
|
||||
</script>
|
||||
|
|
@ -0,0 +1,98 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Display: getComputedStyle().display</title>
|
||||
<link rel="help" href="https://drafts.csswg.org/css2/visuren.html#display-prop">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-display/#the-display-properties">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-grid-1/#grid-containers">
|
||||
<link rel="help" href="https://www.w3.org/TR/CSS2/visuren.html#dis-pos-flo">
|
||||
<meta name="assert" content="position and float can change display computed value.">
|
||||
<meta name="assert" content="display computed value is otherwise as specified.">
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<script src="/css/support/computed-testcommon.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<div id="target"></div>
|
||||
<script>
|
||||
'use strict';
|
||||
|
||||
// https://drafts.csswg.org/css-grid-1/#grid-containers
|
||||
test_computed_value("display", "grid");
|
||||
test_computed_value("display", "inline-grid");
|
||||
|
||||
// https://drafts.csswg.org/css2/visuren.html#display-prop
|
||||
test_computed_value("display", "inline");
|
||||
test_computed_value("display", "block");
|
||||
test_computed_value("display", "list-item");
|
||||
test_computed_value("display", "inline-block");
|
||||
test_computed_value("display", "table");
|
||||
test_computed_value("display", "inline-table");
|
||||
test_computed_value("display", "table-row-group");
|
||||
test_computed_value("display", "table-header-group");
|
||||
test_computed_value("display", "table-footer-group");
|
||||
test_computed_value("display", "table-row");
|
||||
test_computed_value("display", "table-column-group");
|
||||
test_computed_value("display", "table-column");
|
||||
test_computed_value("display", "table-cell");
|
||||
test_computed_value("display", "table-caption");
|
||||
test_computed_value("display", "none");
|
||||
|
||||
// https://drafts.csswg.org/css-flexbox-1/#flex-containers
|
||||
test_computed_value("display", "flex");
|
||||
test_computed_value("display", "inline-flex");
|
||||
|
||||
test_computed_value("display", "contents");
|
||||
|
||||
// https://www.w3.org/TR/CSS2/visuren.html#dis-pos-flo
|
||||
function test_display_affected(property, value) {
|
||||
const target = document.getElementById('target');
|
||||
test(() => {
|
||||
target.style[property] = value;
|
||||
target.style.display = 'inline-table';
|
||||
assert_equals(getComputedStyle(target).display, 'table', 'inline-table -> block');
|
||||
|
||||
const displayValues = [
|
||||
'inline',
|
||||
'table-row-group',
|
||||
'table-column',
|
||||
'table-column-group',
|
||||
'table-header-group',
|
||||
'table-footer-group',
|
||||
'table-row',
|
||||
'table-cell',
|
||||
'table-caption',
|
||||
'inline-block'
|
||||
];
|
||||
|
||||
for (let displayValue of displayValues) {
|
||||
target.style.display = displayValue;
|
||||
assert_equals(getComputedStyle(target).display, 'block', displayValue + ' -> block');
|
||||
}
|
||||
|
||||
target.style.display = 'inline-flex';
|
||||
assert_equals(getComputedStyle(target).display, 'flex', 'inline-flex -> flex');
|
||||
|
||||
target.style.display = 'inline-grid';
|
||||
assert_equals(getComputedStyle(target).display, 'grid', 'inline-grid -> grid');
|
||||
|
||||
// Other values are not affected.
|
||||
target.style.display = 'list-item';
|
||||
assert_equals(getComputedStyle(target).display, 'list-item', 'list-item -> list-item');
|
||||
|
||||
target.style.display = 'contents';
|
||||
assert_equals(getComputedStyle(target).display, 'contents', 'contents -> contents');
|
||||
|
||||
target.style[property] = '';
|
||||
target.style.display = '';
|
||||
}, property + ' ' + value + ' affects computed display');
|
||||
}
|
||||
|
||||
test_display_affected("position", "absolute");
|
||||
test_display_affected("position", "fixed");
|
||||
test_display_affected("float", "left");
|
||||
test_display_affected("float", "right");
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,35 @@
|
|||
<!DOCTYPE html>
|
||||
<title>CSS Flexbox: min-height: auto with flex items containing percentage-sized children</title>
|
||||
<link rel="author" title="Google LLC" href="https://www.google.com/" />
|
||||
<link rel="help" href="https://drafts.csswg.org/css-flexbox/#min-size-auto" />
|
||||
<link rel="issue" href="https://bugs.chromium.org/p/chromium/issues/detail?id=981481" />
|
||||
<link rel="issue" href="https://bugs.chromium.org/p/chromium/issues/detail?id=984606" />
|
||||
<link rel="match" href="../reference/ref-filled-green-100px-square.xht" />
|
||||
|
||||
<style>
|
||||
.flexbox {
|
||||
display: flex;
|
||||
width: 100px;
|
||||
flex-direction: column;
|
||||
}
|
||||
.item {
|
||||
flex-basis: 0;
|
||||
background: green;
|
||||
}
|
||||
.percentage {
|
||||
height: 100%;
|
||||
}
|
||||
.fixed {
|
||||
height: 100px;
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
|
||||
|
||||
<div class="flexbox">
|
||||
<div class="item">
|
||||
<div class="percentage"></div>
|
||||
<div class="fixed"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -0,0 +1,26 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Masking Module Level 1: getComputedStyle().clip</title>
|
||||
<link rel="help" href="https://drafts.fxtf.org/css-masking-1/#clip-property">
|
||||
<meta name="assert" content="clip computed value is as specified, with lengths made absolute.">
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<script src="/css/support/computed-testcommon.js"></script>
|
||||
<style>
|
||||
#target {
|
||||
font-size: 40px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div id="target"></div>
|
||||
<script>
|
||||
test_computed_value("clip", "auto");
|
||||
test_computed_value("clip", "rect(10px, 20px, -30px, 40px)");
|
||||
test_computed_value("clip", "rect(10px, 20px, calc(-1em + 10px), 1em)", "rect(10px, 20px, -30px, 40px)");
|
||||
test_computed_value("clip", "rect(10px, -20px, auto, auto)");
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -3,7 +3,6 @@
|
|||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Masking Module Level 1: parsing clip with invalid values</title>
|
||||
<link rel="author" title="Eric Willigers" href="mailto:ericwilligers@chromium.org">
|
||||
<link rel="help" href="https://drafts.fxtf.org/css-masking-1/#clip-property">
|
||||
<meta name="assert" content="clip supports only the grammar 'rect() | auto'.">
|
||||
<script src="/resources/testharness.js"></script>
|
||||
|
|
@ -15,6 +14,7 @@
|
|||
test_invalid_value("clip", "none");
|
||||
test_invalid_value("clip", "rect(10px, 20px, 30px)");
|
||||
test_invalid_value("clip", "rect(10%, -20%, auto, auto)");
|
||||
test_invalid_value("clip", "rect(10px 20px, 30px 40px)");
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,19 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Masking Module Level 1: getComputedStyle().clipRule</title>
|
||||
<link rel="help" href="https://drafts.fxtf.org/css-masking-1/#the-clip-rule">
|
||||
<meta name="assert" content="clip-rule computed value is as specified.">
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<script src="/css/support/computed-testcommon.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<div id="target"></div>
|
||||
<script>
|
||||
test_computed_value("clip-rule", "nonzero");
|
||||
test_computed_value("clip-rule", "evenodd");
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -13,8 +13,8 @@
|
|||
<body>
|
||||
<script>
|
||||
test_valid_value("clip", "auto");
|
||||
test_valid_value("clip", "rect(10px, 20px, -30px, 40px)", ["rect(10px, 20px, -30px, 40px)", "rect(10px 20px -30px 40px)"]);
|
||||
test_valid_value("clip", "rect(10px, -20px, auto, auto)", ["rect(10px, -20px, auto, auto)", "rect(10px -20px auto auto)"]);
|
||||
test_valid_value("clip", "rect(10px, 20px, -30px, 40px)");
|
||||
test_valid_value("clip", "rect(10px, -20px, auto, auto)");
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,19 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Masking Module Level 1: getComputedStyle().maskType</title>
|
||||
<link rel="help" href="https://drafts.fxtf.org/css-masking-1/#the-mask-type">
|
||||
<meta name="assert" content="mask-type computed value is as specified.">
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<script src="/css/support/computed-testcommon.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<div id="target"></div>
|
||||
<script>
|
||||
test_computed_value("mask-type", "luminance");
|
||||
test_computed_value("mask-type", "alpha");
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,19 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Masking Module Level 1: parsing mask-type with invalid values</title>
|
||||
<link rel="help" href="https://drafts.fxtf.org/css-masking-1/#the-mask-type">
|
||||
<meta name="assert" content="mask-type supports only the grammar 'luminance | alpha'.">
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<script src="/css/support/parsing-testcommon.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<script>
|
||||
test_invalid_value("mask-type", "auto");
|
||||
test_invalid_value("mask-type", "luminance alpha");
|
||||
test_invalid_value("mask-type", "alpha, luminance");
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,18 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Masking Module Level 1: parsing mask-type with valid values</title>
|
||||
<link rel="help" href="https://drafts.fxtf.org/css-masking-1/#the-mask-type">
|
||||
<meta name="assert" content="mask-type supports the full grammar 'luminance | alpha'.">
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<script src="/css/support/parsing-testcommon.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<script>
|
||||
test_valid_value("mask-type", "luminance");
|
||||
test_valid_value("mask-type", "alpha");
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,17 @@
|
|||
<!DOCTYPE html>
|
||||
<link rel="author" title="Xiaocheng Hu" href="mailto:xiaochengh@chromium.org">
|
||||
<link rel="help" href="https://www.w3.org/TR/css-typed-om-1/#stylevalue-subclasses">
|
||||
<meta name="assert" content="CSSUnitValue of different angle units can be added correctly.">
|
||||
<style>
|
||||
.ref {
|
||||
width: 200px;
|
||||
height: 100px;
|
||||
position: absolute;
|
||||
top: 100px;
|
||||
left: 100px;
|
||||
transform: rotate(90deg);
|
||||
background-color: green;
|
||||
}
|
||||
</style>
|
||||
<p>Test passes if there is a filled green rectangle with <strong>no red</strong>.</p>
|
||||
<div class="ref"></div>
|
||||
|
|
@ -0,0 +1,31 @@
|
|||
<!DOCTYPE html>
|
||||
<link rel="author" title="Xiaocheng Hu" href="mailto:xiaochengh@chromium.org">
|
||||
<link rel="help" href="https://www.w3.org/TR/css-typed-om-1/#stylevalue-subclasses">
|
||||
<link rel="match" href="rotate-by-added-angle-ref.html">
|
||||
<meta name="assert" content="CSSUnitValue of different angle units can be added correctly.">
|
||||
<style>
|
||||
.common {
|
||||
width: 200px;
|
||||
height: 100px;
|
||||
position: absolute;
|
||||
top: 100px;
|
||||
left: 100px;
|
||||
}
|
||||
.ref {
|
||||
transform: rotate(90deg);
|
||||
background-color: red;
|
||||
}
|
||||
.test {
|
||||
background-color: green;
|
||||
z-index: 1;
|
||||
}
|
||||
</style>
|
||||
<p>Test passes if there is a filled green rectangle with <strong>no red</strong>.</p>
|
||||
<div class="common ref"></div>
|
||||
<div class="common test"></div>
|
||||
<script>
|
||||
const angle = new CSSMathSum(CSS.deg(45), CSS.turn(0.125)); // 90 degrees
|
||||
const transform = new CSSTransformValue([new CSSRotate(angle)]);
|
||||
const target = document.querySelector('.test');
|
||||
target.attributeStyleMap.set('transform', transform);
|
||||
</script>
|
||||
|
|
@ -1,22 +0,0 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>backdrop-filter: Correctly apply masks/clips to backdrop-filter content</title>
|
||||
<link rel="author" title="Mason Freed" href="mailto:masonfreed@chromium.org">
|
||||
|
||||
|
||||
|
||||
<p>Expected: A black circle.</p>
|
||||
|
||||
<div></div>
|
||||
|
||||
<style>
|
||||
div {
|
||||
position: absolute;
|
||||
top: 100px;
|
||||
left: 50px;
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
background: black;
|
||||
border-radius: 100px;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,22 +0,0 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>backdrop-filter: Correctly apply masks/clips to backdrop-filter content</title>
|
||||
<link rel="author" title="Mason Freed" href="mailto:masonfreed@chromium.org">
|
||||
<link rel="help" href="https://drafts.fxtf.org/filter-effects-2/#BackdropFilterProperty">
|
||||
<link rel="match" href="backdrop-filter-plus-mask-ref.html">
|
||||
|
||||
<p>Expected: A black circle.</p>
|
||||
|
||||
<div></div>
|
||||
|
||||
<style>
|
||||
div {
|
||||
position: absolute;
|
||||
top: 100px;
|
||||
left: 50px;
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
backdrop-filter: invert(1);
|
||||
clip-path: circle(100px at center);
|
||||
}
|
||||
</style>
|
||||
|
|
@ -39,6 +39,8 @@ function drawRectWithAddPathTransform(ctx, transform) {
|
|||
return window.canvas.toDataURL();
|
||||
}
|
||||
|
||||
var emptyCanvasURL = window.canvas.toDataURL();
|
||||
|
||||
[
|
||||
{a: 1, m11: 2},
|
||||
{b: 0, m12: -1},
|
||||
|
|
@ -95,10 +97,10 @@ test(() => {
|
|||
[{c: 0, m21: -0}, matrix2D({m21: -0})],
|
||||
[{c: -0, m21: 0}, matrix2D({m21: 0})],
|
||||
[{c: -0, m21: -0}, matrix2D({m21: -0})],
|
||||
[{d: Infinity, m22: Infinity}, matrix2D({})], // should be silently ignored
|
||||
[{e: -Infinity, m41: -Infinity}, matrix2D({})], // should be silently ignored
|
||||
[{f: NaN, m42: NaN}, matrix2D({})], // should be silently ignored
|
||||
[{f: NaN, m42: NaN, is2D: true}, matrix2D({})], // should be silently ignored
|
||||
[{d: Infinity, m22: Infinity}, null], // setTransform: silently ignore / addPath: silently halt
|
||||
[{e: -Infinity, m41: -Infinity}, null], // setTransform: silently ignore / addPath: silently halt
|
||||
[{f: NaN, m42: NaN}, null], // setTransform: silently ignore / addPath: silently halt
|
||||
[{f: NaN, m42: NaN, is2D: true}, null], // setTransform: silently ignore / addPath: silently halt
|
||||
[{f: 0, m42: null}, matrix2D({m42: 0})], // null is converted to 0
|
||||
[{f: -0, m42: null}, matrix2D({m42: 0})], // null is converted to 0
|
||||
[{a: 2}, matrix2D({m11: 2})],
|
||||
|
|
@ -171,12 +173,14 @@ test(() => {
|
|||
ctx.resetTransform();
|
||||
ctx.setTransform(dict);
|
||||
const matrix = ctx.getTransform();
|
||||
checkMatrix(matrix, expected);
|
||||
checkMatrix(matrix, expected || matrix2D({}));
|
||||
}, `setTransform(${format_dict(dict)})`);
|
||||
|
||||
test(() => {
|
||||
var expectedResultURL = drawRectWithSetTransform(ctx, expected);
|
||||
var actualResultURL = drawRectWithAddPathTransform(ctx, expected);
|
||||
var expectedResultURL = expected ?
|
||||
drawRectWithSetTransform(ctx, expected) :
|
||||
emptyCanvasURL;
|
||||
var actualResultURL = drawRectWithAddPathTransform(ctx, dict);
|
||||
assert_equals(actualResultURL, expectedResultURL);
|
||||
}, `addPath(${format_dict(dict)})`);
|
||||
});
|
||||
|
|
|
|||
|
|
@ -120,7 +120,7 @@
|
|||
p2: { x: 2, y: 0, z: 0, w: 1 },
|
||||
p3: { x: 2, y: 0, z: 0, w: 1 },
|
||||
p4: { x: 2, y: 0, z: 0, w: 1 },
|
||||
bounds: { x: 0, y: 0, width: 0, height: 0 } },
|
||||
bounds: { x: 2, y: 0, width: 0, height: 0 } },
|
||||
'p1Top4Attributes1');
|
||||
|
||||
function checkDOMQuad(createQuad, exp, name) {
|
||||
|
|
|
|||
|
|
@ -0,0 +1,54 @@
|
|||
<!DOCTYPE html>
|
||||
<!--
|
||||
Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/
|
||||
-->
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Reftest Reference</title>
|
||||
<link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
|
||||
<style>
|
||||
div {
|
||||
margin: 1px;
|
||||
background: lime;
|
||||
float: left;
|
||||
}
|
||||
|
||||
.square {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
}
|
||||
.bigWide {
|
||||
width: 48px;
|
||||
height: 32px;
|
||||
}
|
||||
.bigTall {
|
||||
width: 32px;
|
||||
height: 48px;
|
||||
}
|
||||
.small {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
}
|
||||
|
||||
br { clear: both; }
|
||||
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<!-- Note: the specified heights here are just 1/2 the widths. -->
|
||||
<div class="square"></div>
|
||||
<div class="square" style="height: 12px"></div>
|
||||
<br>
|
||||
<div class="bigWide"></div>
|
||||
<div class="bigWide" style="height: 24px"></div>
|
||||
<br>
|
||||
<div class="bigTall"></div>
|
||||
<div class="bigTall" style="height: 16px"></div>
|
||||
<br>
|
||||
<div class="small"></div>
|
||||
<div class="small" style="height: 4px"></div>
|
||||
<br>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,71 @@
|
|||
<!DOCTYPE html>
|
||||
<!--
|
||||
Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/
|
||||
-->
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Test: 'object-fit: contain' and 'cover' on object element whose aspect ratio dynamically changes</title>
|
||||
<link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
|
||||
<link rel="help" href="http://www.w3.org/TR/css3-images/#sizing">
|
||||
<link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit">
|
||||
<link rel="match" href="object-fit-dyn-aspect-ratio-001-ref.html">
|
||||
<style>
|
||||
object {
|
||||
margin: 1px;
|
||||
float: left;
|
||||
/* I'm just using 'object-position' for cosmetic reasons, so that the
|
||||
painted areas are all snapped to top-left which makes reference case
|
||||
more trivial. */
|
||||
object-position: top left;
|
||||
}
|
||||
.cov { object-fit: cover; }
|
||||
.con { object-fit: contain; }
|
||||
|
||||
.square {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
}
|
||||
.bigWide {
|
||||
width: 48px;
|
||||
height: 32px;
|
||||
}
|
||||
.bigTall {
|
||||
width: 32px;
|
||||
height: 48px;
|
||||
}
|
||||
.small {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
}
|
||||
|
||||
br { clear: both; }
|
||||
|
||||
</style>
|
||||
<script>
|
||||
function go() {
|
||||
for (let elem of document.getElementsByTagName("object")) {
|
||||
var doc = elem.contentDocument;
|
||||
/* These should all should select out a piece of the
|
||||
bottom-right quadrant (the lime chunk): */
|
||||
doc.documentElement.setAttribute("viewBox", "8 4 8 4");
|
||||
}
|
||||
}
|
||||
</script>
|
||||
</head>
|
||||
<body onload="go()">
|
||||
<object data="support/colors-16x8-parDefault.svg" class="square cov"></object>
|
||||
<object data="support/colors-16x8-parDefault.svg" class="square con"></object>
|
||||
<br>
|
||||
<object data="support/colors-16x8-parDefault.svg" class="bigWide cov"></object>
|
||||
<object data="support/colors-16x8-parDefault.svg" class="bigWide con"></object>
|
||||
<br>
|
||||
<object data="support/colors-16x8-parDefault.svg" class="bigTall cov"></object>
|
||||
<object data="support/colors-16x8-parDefault.svg" class="bigTall con"></object>
|
||||
<br>
|
||||
<object data="support/colors-16x8-parDefault.svg" class="small cov"></object>
|
||||
<object data="support/colors-16x8-parDefault.svg" class="small con"></object>
|
||||
<br>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,58 @@
|
|||
<!DOCTYPE html>
|
||||
<!--
|
||||
Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/
|
||||
-->
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Reftest Reference</title>
|
||||
<link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
|
||||
<style>
|
||||
div {
|
||||
margin: 1px;
|
||||
background: lime;
|
||||
float: left;
|
||||
}
|
||||
|
||||
.square {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
}
|
||||
.bigWide {
|
||||
width: 48px;
|
||||
height: 32px;
|
||||
}
|
||||
.bigTall {
|
||||
width: 32px;
|
||||
height: 48px;
|
||||
}
|
||||
.small {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
}
|
||||
|
||||
br { clear: both; }
|
||||
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<!-- Note: each inline-style specified width here is just using the final
|
||||
viewBox aspect-ratio (1/2) times the element's specified height. This
|
||||
is how wide the concrete object size[1] should end up, for the
|
||||
testcase's "object-fit:contain" elements.
|
||||
[1] https://drafts.csswg.org/css-images-3/#concrete-object-size -->
|
||||
<div class="square"></div>
|
||||
<div class="square" style="width: 12px"></div>
|
||||
<br>
|
||||
<div class="bigWide"></div>
|
||||
<div class="bigWide" style="width: 16px"></div>
|
||||
<br>
|
||||
<div class="bigTall"></div>
|
||||
<div class="bigTall" style="width: 24px"></div>
|
||||
<br>
|
||||
<div class="small"></div>
|
||||
<div class="small" style="width: 4px"></div>
|
||||
<br>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,71 @@
|
|||
<!DOCTYPE html>
|
||||
<!--
|
||||
Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/
|
||||
-->
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Test: 'object-fit: contain' and 'cover' on object element whose aspect ratio dynamically changes</title>
|
||||
<link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
|
||||
<link rel="help" href="http://www.w3.org/TR/css3-images/#sizing">
|
||||
<link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit">
|
||||
<link rel="match" href="object-fit-dyn-aspect-ratio-002-ref.html">
|
||||
<style>
|
||||
object {
|
||||
margin: 1px;
|
||||
float: left;
|
||||
/* I'm just using 'object-position' for cosmetic reasons, so that the
|
||||
painted areas are all snapped to top-left which makes reference case
|
||||
more trivial. */
|
||||
object-position: top left;
|
||||
}
|
||||
.cov { object-fit: cover; }
|
||||
.con { object-fit: contain; }
|
||||
|
||||
.square {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
}
|
||||
.bigWide {
|
||||
width: 48px;
|
||||
height: 32px;
|
||||
}
|
||||
.bigTall {
|
||||
width: 32px;
|
||||
height: 48px;
|
||||
}
|
||||
.small {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
}
|
||||
|
||||
br { clear: both; }
|
||||
|
||||
</style>
|
||||
<script>
|
||||
function go() {
|
||||
for (let elem of document.getElementsByTagName("object")) {
|
||||
var doc = elem.contentDocument;
|
||||
/* These should all should select out a piece of the
|
||||
bottom-right quadrant (the lime chunk): */
|
||||
doc.documentElement.setAttribute("viewBox", "4 8 4 8");
|
||||
}
|
||||
}
|
||||
</script>
|
||||
</head>
|
||||
<body onload="go()">
|
||||
<object data="support/colors-8x16-parDefault.svg" class="square cov"></object>
|
||||
<object data="support/colors-8x16-parDefault.svg" class="square con"></object>
|
||||
<br>
|
||||
<object data="support/colors-8x16-parDefault.svg" class="bigWide cov"></object>
|
||||
<object data="support/colors-8x16-parDefault.svg" class="bigWide con"></object>
|
||||
<br>
|
||||
<object data="support/colors-8x16-parDefault.svg" class="bigTall cov"></object>
|
||||
<object data="support/colors-8x16-parDefault.svg" class="bigTall con"></object>
|
||||
<br>
|
||||
<object data="support/colors-8x16-parDefault.svg" class="small cov"></object>
|
||||
<object data="support/colors-8x16-parDefault.svg" class="small con"></object>
|
||||
<br>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -1,3 +1,7 @@
|
|||
# Tests for dynamic change to aspect ratio on element with 'object-fit' set
|
||||
== object-fit-dyn-aspect-ratio-001.html object-fit-dyn-aspect-ratio-001-ref.html
|
||||
== object-fit-dyn-aspect-ratio-002.html object-fit-dyn-aspect-ratio-002-ref.html
|
||||
|
||||
# Tests for 'object-fit' / 'object-position' with a PNG image
|
||||
== object-fit-fill-png-001c.html object-fit-fill-png-001-ref.html
|
||||
== object-fit-fill-png-001e.html object-fit-fill-png-001-ref.html
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue