mirror of
https://github.com/servo/servo.git
synced 2025-10-04 02:29:12 +01:00
Update web-platform-tests to revision 8f8ff0e2a61f2a24996404921fe853cb1fd9b432
This commit is contained in:
WPT Sync Bot
parent
e98cd07910
commit
141a52794b
58 changed files with 1615 additions and 276 deletions
|
|
@ -13,7 +13,7 @@
|
|||
</style>
|
||||
<p>Test passes if it has the same output than the reference.</p>
|
||||
<div class="wrapper">
|
||||
<span style="display: inline-block; margin: 1em 0; contain: layout;">
|
||||
<span style="display: inline-block; margin: 1em 0; vertical-align: top; contain: layout;">
|
||||
<div style="margin: 1em 0;">This text should have 2em top and bottom margins (margins do not collapse).</div>
|
||||
</span>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -6,7 +6,7 @@
|
|||
|
||||
<link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/">
|
||||
<link rel="help" href="https://www.w3.org/TR/css-contain-1/#containment-size">
|
||||
<link rel="match" href="reference/contain-size-021-ref.html">
|
||||
<link rel="match" href="reference/contain-size-023-ref.html">
|
||||
|
||||
<meta content="This test checks that when laying out an inline-block element with 'contain: size', the inline-block element must be treated as if it would have no contents. In this test, the inline-block element has text and no in-flow block descendant." name="assert">
|
||||
<meta name="flags" content="">
|
||||
|
|
|
|||
|
|
@ -6,7 +6,7 @@
|
|||
|
||||
<link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/">
|
||||
<link rel="help" href="https://www.w3.org/TR/css-contain-1/#containment-size">
|
||||
<link rel="match" href="reference/contain-size-021-ref.html">
|
||||
<link rel="match" href="reference/contain-size-025-ref.html">
|
||||
|
||||
<meta content="This test checks that when laying out an inline-block element with 'contain: size', the inline-block element must be treated as if it would have no contents. In this test, the inline-block element has 2 in-flow block descendants made of images." name="assert">
|
||||
<meta name="flags" content="">
|
||||
|
|
|
|||
|
|
@ -6,7 +6,7 @@
|
|||
|
||||
<link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/">
|
||||
<link rel="help" href="https://www.w3.org/TR/css-contain-1/#containment-size">
|
||||
<link rel="match" href="reference/contain-size-021-ref.html">
|
||||
<link rel="match" href="reference/contain-size-027-ref.html">
|
||||
|
||||
<meta content="This test checks that when laying out an inline-block element with 'contain: size', the inline-block element must be treated as if it would have no contents. In this test, the inline-block element has 2 in-flow block descendants made of text." name="assert">
|
||||
<meta name="flags" content="">
|
||||
|
|
|
|||
|
|
@ -6,7 +6,7 @@
|
|||
|
||||
<link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/">
|
||||
<link rel="help" href="https://www.w3.org/TR/css-contain-1/#containment-size">
|
||||
<link rel="match" href="reference/contain-size-021-ref.html">
|
||||
<link rel="match" href="reference/contain-size-025-ref.html">
|
||||
|
||||
<meta content="This test checks that when laying out an inline replaced element with 'contain: size', the inline replaced element must be treated as having an intrinsic width and height of 0." name="assert">
|
||||
<meta name="flags" content="">
|
||||
|
|
|
|||
|
|
@ -1,13 +1,31 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Containment Test: Reference file</title>
|
||||
<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
|
||||
<style>
|
||||
div.inline-block {
|
||||
display: inline-block;
|
||||
height: 100px;
|
||||
width: 100px;
|
||||
}
|
||||
|
||||
<meta charset="UTF-8">
|
||||
div#blue-test {
|
||||
background-color: blue;
|
||||
padding: 50px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
<title>CSS Reference Test</title>
|
||||
div#orange-reference {
|
||||
background-color: orange;
|
||||
}
|
||||
</style>
|
||||
|
||||
<link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/">
|
||||
<p>This test passes if the painted blue area is <strong>exactly as wide as</strong> the orange square.
|
||||
|
||||
<p>This test passes if the painted blue area is <strong>exactly as wide as</strong> the orange square.
|
||||
<div>
|
||||
<div id="blue-test" class="inline-block"><img src="../support/blue50wBy46h.png" alt="Image download support must be enabled"></div>
|
||||
</div>
|
||||
|
||||
<div><img src="../support/swatch-blue.png" width="100" height="100" alt="Image download support must be enabled"></div>
|
||||
|
||||
<div><img src="../support/swatch-orange.png" width="100" height="100" alt="Image download support must be enabled"></div>
|
||||
<div>
|
||||
<div id="orange-reference" class="inline-block"></div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,33 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Containment Test: Reference file</title>
|
||||
<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
|
||||
<style>
|
||||
div.inline-block {
|
||||
display: inline-block;
|
||||
height: 100px;
|
||||
width: 100px;
|
||||
}
|
||||
|
||||
div#blue-test {
|
||||
background-color: blue;
|
||||
color: transparent;
|
||||
font-size: 100px;
|
||||
padding: 50px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
div#orange-reference {
|
||||
background-color: orange;
|
||||
}
|
||||
</style>
|
||||
|
||||
<p>This test passes if the painted blue area is <strong>exactly as wide as</strong> the orange square.
|
||||
|
||||
<div>
|
||||
<div id="blue-test" class="inline-block">B</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<div id="orange-reference" class="inline-block"></div>
|
||||
</div>
|
||||
|
|
@ -0,0 +1,13 @@
|
|||
<!DOCTYPE html>
|
||||
|
||||
<meta charset="UTF-8">
|
||||
|
||||
<title>CSS Reference Test</title>
|
||||
|
||||
<link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/">
|
||||
|
||||
<p>This test passes if the painted blue area is <strong>exactly as wide as</strong> the orange square.
|
||||
|
||||
<div><img src="../support/swatch-blue.png" width="100" height="100" alt="Image download support must be enabled"></div>
|
||||
|
||||
<div><img src="../support/swatch-orange.png" width="100" height="100" alt="Image download support must be enabled"></div>
|
||||
|
|
@ -0,0 +1,41 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Containment Test: Reference file</title>
|
||||
<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
|
||||
<style>
|
||||
div.inline-block {
|
||||
display: inline-block;
|
||||
height: 100px;
|
||||
width: 100px;
|
||||
}
|
||||
|
||||
div#blue-test {
|
||||
background-color: blue;
|
||||
color: transparent;
|
||||
font-size: 50px;
|
||||
line-height: 1;
|
||||
padding: 50px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
div#orange-reference {
|
||||
background-color: orange;
|
||||
}
|
||||
|
||||
span {
|
||||
display: block;
|
||||
}
|
||||
</style>
|
||||
|
||||
<p>This test passes if the painted blue area is <strong>exactly as wide as</strong> the orange square.
|
||||
|
||||
<div>
|
||||
<div id="blue-test" class="inline-block">
|
||||
<span>B</span>
|
||||
<span>L</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<div id="orange-reference" class="inline-block"></div>
|
||||
</div>
|
||||
|
|
@ -0,0 +1,14 @@
|
|||
<!DOCTYPE html>
|
||||
<title>Conic gradient with a two position color stop</title>
|
||||
<link rel="help" href="https://drafts.csswg.org/css-images-4/#color-stop-syntax">
|
||||
<meta name="assert" content="A color stop with two positions create a hard transition">
|
||||
<link rel="match" href="support/100x100-blue-green.html">
|
||||
<style>
|
||||
#target {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
background-color: red;
|
||||
background-image: conic-gradient(green 0% 180deg, blue 180deg);
|
||||
}
|
||||
</style>
|
||||
<div id="target"></div>
|
||||
|
|
@ -0,0 +1,14 @@
|
|||
<!DOCTYPE html>
|
||||
<title>Linear gradient with a two position color stop</title>
|
||||
<link rel="help" href="https://drafts.csswg.org/css-images-4/#color-stop-syntax">
|
||||
<meta name="assert" content="A color stop with two positions create a hard transition">
|
||||
<link rel="match" href="support/100x100-blue-green.html">
|
||||
<style>
|
||||
#target {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
background-color: red;
|
||||
background-image: linear-gradient(to right, blue 0% 50%, green 50%);
|
||||
}
|
||||
</style>
|
||||
<div id="target"></div>
|
||||
|
|
@ -0,0 +1,14 @@
|
|||
<!DOCTYPE html>
|
||||
<title>Radial gradient with a two position color stop</title>
|
||||
<link rel="help" href="https://drafts.csswg.org/css-images-4/#color-stop-syntax">
|
||||
<meta name="assert" content="A color stop with two positions create a hard transition">
|
||||
<link rel="match" href="support/100x100-blue-green.html">
|
||||
<style>
|
||||
#target {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
background-color: red;
|
||||
background-image: radial-gradient(ellipse 50px 10000px at 0px 50px, blue 0% 50px, green 50px);
|
||||
}
|
||||
</style>
|
||||
<div id="target"></div>
|
||||
|
|
@ -0,0 +1,2 @@
|
|||
<!DOCTYPE html>
|
||||
<div style="width: 50px; height: 100px; background-color: green; border-left: 50px solid blue"></div>
|
||||
|
|
@ -18,14 +18,29 @@
|
|||
register_length('--font-size-ex');
|
||||
register_length('--font-size-ch');
|
||||
register_length('--font-size-px');
|
||||
register_length('--font-size-em-via-var');
|
||||
register_length('--font-size-rem-via-var');
|
||||
register_length('--font-size-ex-via-var');
|
||||
register_length('--font-size-ch-via-var');
|
||||
</script>
|
||||
<style>
|
||||
:root {
|
||||
--unregistered-em: 10em;
|
||||
--unregistered-rem: 10rem;
|
||||
--unregistered-ex: 10ex;
|
||||
--unregistered-ch: 10ch;
|
||||
}
|
||||
|
||||
:root, #target {
|
||||
--font-size-em: 2em;
|
||||
--font-size-rem: 2rem;
|
||||
--font-size-ex: 2ex;
|
||||
--font-size-ch: 2ch;
|
||||
--font-size-px: 42px;
|
||||
--font-size-em-via-var: var(--unregistered-em);
|
||||
--font-size-rem-via-var: var(--unregistered-rem);
|
||||
--font-size-ex-via-var: var(--unregistered-ex);
|
||||
--font-size-ch-via-var: var(--unregistered-ch);
|
||||
}
|
||||
|
||||
#target {
|
||||
|
|
@ -40,8 +55,13 @@
|
|||
|
||||
// Compute a dimension (e.g. 1em) given a certain fontSize.
|
||||
function compute_dimension(dimension, fontSize, element = ref) {
|
||||
element.style = `font-size: ${fontSize}; margin-bottom: ${dimension};`;
|
||||
return getComputedStyle(element).marginBottom;
|
||||
try {
|
||||
element.attributeStyleMap.set('font-size', fontSize);
|
||||
element.attributeStyleMap.set('margin-bottom', dimension);
|
||||
return getComputedStyle(element).marginBottom;
|
||||
} finally {
|
||||
element.attributeStyleMap.clear();
|
||||
}
|
||||
}
|
||||
|
||||
function assert_property_equals(name, value, element = target) {
|
||||
|
|
@ -51,6 +71,11 @@
|
|||
|
||||
let unsetFontSize = compute_dimension('1em', 'unset');
|
||||
|
||||
add_result_callback(function(){
|
||||
target.attributeStyleMap.clear();
|
||||
document.documentElement.attributeStyleMap.clear();
|
||||
});
|
||||
|
||||
test(function() {
|
||||
target.style = 'font-size: var(--font-size-px);';
|
||||
assert_property_equals('font-size', '42px');
|
||||
|
|
@ -84,10 +109,9 @@
|
|||
|
||||
test(function() {
|
||||
let root = document.documentElement;
|
||||
root.style = 'font-size: var(--font-size-rem);';
|
||||
let expected1rem = compute_dimension('1rem', 'unset', root);
|
||||
let expected2rem = compute_dimension('2rem', 'unset', root);
|
||||
root.style = 'font-size: unset;';
|
||||
root.style = 'font-size: var(--font-size-rem);';
|
||||
assert_property_equals('font-size', expected1rem, root);
|
||||
assert_property_equals('--font-size-rem', expected2rem, root);
|
||||
}, 'Lengths with rem units may not be referenced from font-size on root element');
|
||||
|
|
@ -119,4 +143,31 @@
|
|||
root.style = 'font-size: unset;';
|
||||
}, 'Fallback triggered when rem unit cycle is detected on root element');
|
||||
|
||||
test(function() {
|
||||
target.style = 'font-size: var(--font-size-em-via-var);';
|
||||
assert_property_equals('font-size', unsetFontSize);
|
||||
assert_property_equals('--font-size-em-via-var', compute_dimension('10em', 'unset'));
|
||||
}, 'Lengths with em units are detected via var references');
|
||||
|
||||
test(function() {
|
||||
target.style = 'font-size: var(--font-size-ex-via-var);';
|
||||
assert_property_equals('font-size', unsetFontSize);
|
||||
assert_property_equals('--font-size-ex-via-var', compute_dimension('10ex', 'unset'));
|
||||
}, 'Lengths with ex units are detected via var references');
|
||||
|
||||
test(function() {
|
||||
target.style = 'font-size: var(--font-size-ch-via-var);';
|
||||
assert_property_equals('font-size', unsetFontSize);
|
||||
assert_property_equals('--font-size-ch-via-var', compute_dimension('10ch', 'unset'));
|
||||
}, 'Lengths with ch units are detected via var references');
|
||||
|
||||
test(function() {
|
||||
let root = document.documentElement;
|
||||
let expected1rem = compute_dimension('1rem', 'unset', root);
|
||||
let expected10rem = compute_dimension('10rem', 'unset', root);
|
||||
root.style = 'font-size: var(--font-size-rem-via-var);';
|
||||
assert_property_equals('font-size', expected1rem, root);
|
||||
assert_property_equals('--font-size-rem-via-var', expected10rem, root);
|
||||
}, 'Lengths with rem units are detected via var references');
|
||||
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,58 @@
|
|||
<!doctype html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Tests: calc() and division for integers</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-values-4/#calc-range">
|
||||
<link rel="help" href="https://github.com/w3c/csswg-drafts/issues/2337">
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<div id="test"></div>
|
||||
<script>
|
||||
const TESTS = [
|
||||
{
|
||||
specified: "calc(2)",
|
||||
computed: "2",
|
||||
description: "Sanity",
|
||||
},
|
||||
{
|
||||
specified: "calc(4 / 2)",
|
||||
computed: "2",
|
||||
description: "Basic division works",
|
||||
},
|
||||
{
|
||||
specified: "calc(1 / 2)",
|
||||
computed: "1",
|
||||
description: "Rounds up if fractional part is >= 0.5",
|
||||
},
|
||||
{
|
||||
specified: "calc(0.5)",
|
||||
computed: "1",
|
||||
description: "Accepts numbers, and rounds",
|
||||
},
|
||||
{
|
||||
specified: "calc(6 / 2.0)",
|
||||
computed: "3",
|
||||
description: "Operation between <integer> and <number> works",
|
||||
},
|
||||
{
|
||||
specified: "calc(1 / 3)",
|
||||
computed: "0",
|
||||
description: "Rounds down if fractional part is < 0.5",
|
||||
},
|
||||
{
|
||||
specified: "calc(calc(1 / 3) * 3)",
|
||||
computed: "1",
|
||||
description: "Only rounds at the end of the conversion",
|
||||
}
|
||||
];
|
||||
|
||||
const testElement = document.getElementById("test");
|
||||
for (const { specified, computed, description } of TESTS) {
|
||||
test(function() {
|
||||
testElement.style.zIndex = "42"; // Just something that we know it's valid and makes tests not rely on order.
|
||||
testElement.style.zIndex = specified;
|
||||
assert_equals(getComputedStyle(testElement).zIndex, computed);
|
||||
}, description);
|
||||
}
|
||||
</script>
|
||||
|
|
@ -22,7 +22,7 @@ else
|
|||
fi
|
||||
|
||||
rsync -avz --delete --filter=". ./sync-tests-filter" "$MOZTREE"/layout/reftests/w3c-css/submitted/ ./
|
||||
sed -i -e 's/^\(\(fails\|needs-focus\|random\|skip\|asserts\|slow\|require-or\|silentfail\|pref\|test-pref\|ref-pref\|fuzzy\)[^ ]* *\?\)\+//;/^default-preferences /d;s/ \?# \?\(TC: \)\?[bB]ug.*//;s/ # Initial mulet triage:.*//' $(find . -name reftest.list)
|
||||
sed -i -e 's/^\(\(fails\|needs-focus\|random\|skip\|asserts\|slow\|require-or\|silentfail\|pref\|test-pref\|ref-pref\|fuzzy\)[^ ]* *\?\)\+//;/^default-preferences /d;s/ \?# \?\(TC: \)\?[bB]ug.*//' $(find . -name reftest.list)
|
||||
sed -i -e 's/-moz-crisp-edges/pixelated/g;s/-moz-min-content/min-content/g;s/-moz-max-content/max-content/g' $(find . -regex ".*\.\(xht\|xhtml\|html\|css\)")
|
||||
git add -A .
|
||||
git commit -m"Sync Mozilla CSS tests as of https://hg.mozilla.org/mozilla-central/rev/$MOZREV ." -e .
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue