mirror of
https://github.com/servo/servo.git
synced 2025-08-25 07:08:21 +01:00
Update web-platform-tests to revision 1aaada4bbc936024441fe7995b77c21a2c554da1
This commit is contained in:
WPT Sync Bot
parent
1e1eca07ed
commit
5e9d150c07
140 changed files with 3413 additions and 553 deletions
|
|
@ -0,0 +1,28 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>Inheritance of CSS Animations properties</title>
|
||||
<link rel="help" href="https://drafts.csswg.org/css-animations/#property-index">
|
||||
<meta name="assert" content="Properties inherit or not according to the spec.">
|
||||
<meta name="assert" content="Properties have initial values according to the spec.">
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<script src="/css/support/inheritance-testcommon.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<div id="container">
|
||||
<div id="target"></div>
|
||||
</div>
|
||||
<script>
|
||||
assert_not_inherited('animation-delay', '0s', '2s');
|
||||
assert_not_inherited('animation-direction', 'normal', 'reverse');
|
||||
assert_not_inherited('animation-duration', '0s', '3s');
|
||||
assert_not_inherited('animation-fill-mode', 'none', 'forwards');
|
||||
assert_not_inherited('animation-iteration-count', '1', '4');
|
||||
assert_not_inherited('animation-name', 'none', 'spinner');
|
||||
assert_not_inherited('animation-play-state', 'running', 'paused');
|
||||
assert_not_inherited('animation-timing-function', 'ease', 'linear');
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,19 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Containment Test: Layout containment independent formatting context</title>
|
||||
<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-contain-1/#containment-layout">
|
||||
<link rel="match" href="reference/contain-paint-independent-formatting-context-001-ref.html">
|
||||
<meta name=assert content="Layout containment elements establish an independent formatting context. The test checks that this feature of layout containment applies to blocks.">
|
||||
<style>
|
||||
.wrapper {
|
||||
border: solid thick;
|
||||
margin: 1em;
|
||||
}
|
||||
</style>
|
||||
<p>Test passes if it has the same output than the reference.</p>
|
||||
<div class="wrapper">
|
||||
<div style="margin: 1em 0; contain: layout;">
|
||||
<div style="margin: 1em 0;">This text should have 2em top and bottom margins (margins do not collapse).</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -3,27 +3,17 @@
|
|||
<title>CSS Containment Test: Layout containment independent formatting context</title>
|
||||
<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-contain-1/#containment-layout">
|
||||
<link rel="match" href="reference/contain-paint-013-ref.html">
|
||||
<meta name=assert content="Layout containment elements establish an independent formatting context. The test checks that this feature of layout containment applies to blocks and inline blocks, but it doesn't apply to inline elements.">
|
||||
<link rel="match" href="reference/contain-paint-independent-formatting-context-001-ref.html">
|
||||
<meta name=assert content="Layout containment elements establish an independent formatting context. The test checks that this feature of layout containment applies to inline blocks.">
|
||||
<style>
|
||||
.wrapper {
|
||||
border: solid thick;
|
||||
margin: 1em;
|
||||
}
|
||||
</style>
|
||||
<p>Test passes if on the first two boxes the top and bottom margins of the text line are double size than on the last box.</p>
|
||||
<div class="wrapper">
|
||||
<div style="margin: 1em 0; contain: layout;">
|
||||
<div style="margin: 1em 0;">This text should have 2em top and bottom margins (margins do not collapse).</div>
|
||||
</div>
|
||||
</div>
|
||||
<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;">
|
||||
<div style="margin: 1em 0;">This text should have 2em top and bottom margins (margins do not collapse).</div>
|
||||
</span>
|
||||
</div>
|
||||
<div class="wrapper">
|
||||
<span style="margin: 1em 0; contain: layout;">
|
||||
<div style="margin: 1em 0;">This text should have 1em top and bottom margins.</div>
|
||||
</span>
|
||||
</div>
|
||||
|
|
@ -0,0 +1,19 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Containment Test: Layout containment independent formatting context</title>
|
||||
<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-contain-1/#containment-layout">
|
||||
<link rel="match" href="reference/contain-paint-independent-formatting-context-003-ref.html">
|
||||
<meta name=assert content="Layout containment elements establish an independent formatting context. The test checks that this feature of paint containment does not appliy to inline elements.">
|
||||
<style>
|
||||
.wrapper {
|
||||
border: solid thick;
|
||||
margin: 1em;
|
||||
}
|
||||
</style>
|
||||
<p>Test passes if it has the same output than the reference.</p>
|
||||
<div class="wrapper">
|
||||
<span style="margin: 1em 0; contain: layout;">
|
||||
<div style="margin: 1em 0;">This text should have 1em top and bottom margins.</div>
|
||||
</span>
|
||||
</div>
|
||||
|
|
@ -0,0 +1,19 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Containment Test: Paint containment independent formatting context</title>
|
||||
<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-contain-1/#containment-paint">
|
||||
<link rel="match" href="reference/contain-paint-independent-formatting-context-001-ref.html">
|
||||
<meta name=assert content="Paint containment elements establish an independent formatting context. The test checks that this feature of paint containment applies to blocks.">
|
||||
<style>
|
||||
.wrapper {
|
||||
border: solid thick;
|
||||
margin: 1em;
|
||||
}
|
||||
</style>
|
||||
<p>Test passes if it has the same output than the reference.</p>
|
||||
<div class="wrapper">
|
||||
<div style="margin: 1em 0; contain: paint;">
|
||||
<div style="margin: 1em 0;">This text should have 2em top and bottom margins (margins do not collapse).</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -3,27 +3,17 @@
|
|||
<title>CSS Containment Test: Paint containment independent formatting context</title>
|
||||
<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-contain-1/#containment-paint">
|
||||
<link rel="match" href="reference/contain-paint-013-ref.html">
|
||||
<meta name=assert content="Paint containment elements establish an independent formatting context. The test checks that this feature of paint containment applies to blocks and inline blocks, but it doesn't apply to inline elements.">
|
||||
<link rel="match" href="reference/contain-paint-independent-formatting-context-001-ref.html">
|
||||
<meta name=assert content="Paint containment elements establish an independent formatting context. The test checks that this feature of paint containment applies to inline blocks.">
|
||||
<style>
|
||||
.wrapper {
|
||||
border: solid thick;
|
||||
margin: 1em;
|
||||
}
|
||||
</style>
|
||||
<p>Test passes if on the first two boxes the top and bottom margins of the text line are double size than on the last box.</p>
|
||||
<div class="wrapper">
|
||||
<div style="margin: 1em 0; contain: paint;">
|
||||
<div style="margin: 1em 0;">This text should have 2em top and bottom margins (margins do not collapse).</div>
|
||||
</div>
|
||||
</div>
|
||||
<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: paint;">
|
||||
<div style="margin: 1em 0;">This text should have 2em top and bottom margins (margins do not collapse).</div>
|
||||
</span>
|
||||
</div>
|
||||
<div class="wrapper">
|
||||
<span style="margin: 1em 0; contain: paint;">
|
||||
<div style="margin: 1em 0;">This text should have 1em top and bottom margins.</div>
|
||||
</span>
|
||||
</div>
|
||||
|
|
@ -0,0 +1,19 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Containment Test: Paint containment independent formatting context</title>
|
||||
<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-contain-1/#containment-paint">
|
||||
<link rel="match" href="reference/contain-paint-independent-formatting-context-003-ref.html">
|
||||
<meta name=assert content="Paint containment elements establish an independent formatting context. The test checks that this feature of paint containment does not appliy to inline elements.">
|
||||
<style>
|
||||
.wrapper {
|
||||
border: solid thick;
|
||||
margin: 1em;
|
||||
}
|
||||
</style>
|
||||
<p>Test passes if it has the same output than the reference.</p>
|
||||
<div class="wrapper">
|
||||
<span style="margin: 1em 0; contain: paint;">
|
||||
<div style="margin: 1em 0;">This text should have 1em top and bottom margins.</div>
|
||||
</span>
|
||||
</div>
|
||||
|
|
@ -1,20 +0,0 @@
|
|||
<!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>
|
||||
.wrapper {
|
||||
border: solid thick;
|
||||
margin: 1em;
|
||||
}
|
||||
</style>
|
||||
<p>Test passes if on the first two boxes the top and bottom margins of the text line are double size than on the last box.</p>
|
||||
<div class="wrapper">
|
||||
<div style="margin: 2em 0;">This text should have 2em top and bottom margins (margins do not collapse).</div>
|
||||
</div>
|
||||
<div class="wrapper">
|
||||
<div style="margin: 2em 0;">This text should have 2em top and bottom margins (margins do not collapse).</div>
|
||||
</div>
|
||||
<div class="wrapper">
|
||||
<div style="margin: 1em 0;">This text should have 1em top and bottom margins.</div>
|
||||
</div>
|
||||
|
|
@ -0,0 +1,14 @@
|
|||
<!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>
|
||||
.wrapper {
|
||||
border: solid thick;
|
||||
margin: 1em;
|
||||
}
|
||||
</style>
|
||||
<p>Test passes if it has the same output than the reference.</p>
|
||||
<div class="wrapper">
|
||||
<div style="margin: 2em 0;">This text should have 2em top and bottom margins (margins do not collapse).</div>
|
||||
</div>
|
||||
|
|
@ -0,0 +1,14 @@
|
|||
<!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>
|
||||
.wrapper {
|
||||
border: solid thick;
|
||||
margin: 1em;
|
||||
}
|
||||
</style>
|
||||
<p>Test passes if it has the same output than the reference.</p>
|
||||
<div class="wrapper">
|
||||
<div style="margin: 1em 0;">This text should have 1em top and bottom margins.</div>
|
||||
</div>
|
||||
|
|
@ -0,0 +1,22 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Flexible Box Layout Module Level 1: parsing flex-basis with invalid values</title>
|
||||
<link rel="author" title="Eric Willigers" href="mailto:ericwilligers@chromium.org">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-flexbox/#propdef-flex-basis">
|
||||
<meta name="assert" content="flex-basis supports only the grammar 'content | <‘width’>'.">
|
||||
<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("flex-basis", "none");
|
||||
test_invalid_value("flex-basis", "auto content");
|
||||
test_invalid_value("flex-basis", "-1px");
|
||||
test_invalid_value("flex-basis", "-2%");
|
||||
test_invalid_value("flex-basis", "3px 4%");
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,24 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Flexible Box Layout Module Level 1: parsing flex-basis with valid values</title>
|
||||
<link rel="author" title="Eric Willigers" href="mailto:ericwilligers@chromium.org">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-flexbox/#propdef-flex-basis">
|
||||
<meta name="assert" content="flex-basis supports the full grammar 'content | <‘width’>'.">
|
||||
<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("flex-basis", "1px");
|
||||
test_valid_value("flex-basis", "calc(2em + 3ex)");
|
||||
test_valid_value("flex-basis", "400%");
|
||||
test_valid_value("flex-basis", "auto");
|
||||
|
||||
// The following is not yet supported by browsers:
|
||||
// test_valid_value("flex-basis", "content");
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,19 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Flexible Box Layout Module Level 1: parsing flex-direction with invalid values</title>
|
||||
<link rel="author" title="Eric Willigers" href="mailto:ericwilligers@chromium.org">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-flexbox/#propdef-flex-direction">
|
||||
<meta name="assert" content="flex-direction supports only the grammar 'row | row-reverse | column | column-reverse'.">
|
||||
<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("flex-direction", "auto");
|
||||
test_invalid_value("flex-direction", "column row-reverse");
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,21 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Flexible Box Layout Module Level 1: parsing flex-direction with valid values</title>
|
||||
<link rel="author" title="Eric Willigers" href="mailto:ericwilligers@chromium.org">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-flexbox/#propdef-flex-direction">
|
||||
<meta name="assert" content="flex-direction supports the full grammar 'row | row-reverse | column | column-reverse'.">
|
||||
<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("flex-direction", "row");
|
||||
test_valid_value("flex-direction", "row-reverse");
|
||||
test_valid_value("flex-direction", "column");
|
||||
test_valid_value("flex-direction", "column-reverse");
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,19 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Flexible Box Layout Module Level 1: parsing flex-flow with invalid values</title>
|
||||
<link rel="author" title="Eric Willigers" href="mailto:ericwilligers@chromium.org">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-flexbox/#propdef-flex-flow">
|
||||
<meta name="assert" content="flex-flow supports only the grammar '<flex-direction> || <flex-wrap>'.">
|
||||
<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("flex-flow", "nowrap row nowrap");
|
||||
test_invalid_value("flex-flow", "column wrap column");
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,20 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Flexible Box Layout Module Level 1: parsing flex-flow with valid values</title>
|
||||
<link rel="author" title="Eric Willigers" href="mailto:ericwilligers@chromium.org">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-flexbox/#propdef-flex-flow">
|
||||
<meta name="assert" content="flex-flow supports the full grammar '<flex-direction> || <flex-wrap>'.">
|
||||
<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("flex-flow", "column nowrap");
|
||||
test_valid_value("flex-flow", "nowrap column", "column nowrap");
|
||||
test_valid_value("flex-flow", "wrap row-reverse", "row-reverse wrap");
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,22 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Flexible Box Layout Module Level 1: parsing flex-grow with invalid values</title>
|
||||
<link rel="author" title="Eric Willigers" href="mailto:ericwilligers@chromium.org">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-flexbox/#propdef-flex-grow">
|
||||
<meta name="assert" content="flex-grow supports only the grammar '<number>'.">
|
||||
<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("flex-grow", "2e3.4");
|
||||
test_invalid_value("flex-grow", "-+5");
|
||||
test_invalid_value("flex-grow", "6 7");
|
||||
|
||||
test_invalid_value("flex-grow", "1."); // Accepted by Edge.
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,21 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Flexible Box Layout Module Level 1: parsing flex-grow with valid values</title>
|
||||
<link rel="author" title="Eric Willigers" href="mailto:ericwilligers@chromium.org">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-flexbox/#propdef-flex-grow">
|
||||
<meta name="assert" content="flex-grow supports the full grammar '<number>'.">
|
||||
<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("flex-grow", "1");
|
||||
test_valid_value("flex-grow", "23.4e5", ["2.34e+06", "2.34e+006", "2340000"]);
|
||||
test_valid_value("flex-grow", "+.678E9", ["6.78e+08", "6.78e+008", "678000000"]);
|
||||
test_valid_value("flex-grow", ".0", "0");
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,21 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Flexible Box Layout Module Level 1: parsing flex with invalid values</title>
|
||||
<link rel="author" title="Eric Willigers" href="mailto:ericwilligers@chromium.org">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-flexbox/#propdef-flex">
|
||||
<meta name="assert" content="flex supports only the grammar 'none | [ <‘flex-grow’> <‘flex-shrink’>? || <‘flex-basis’> ]'.">
|
||||
<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("flex", "none 1");
|
||||
test_invalid_value("flex", "2 3 4");
|
||||
test_invalid_value("flex", "5px 7%");
|
||||
test_invalid_value("flex", "9 none");
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,22 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Flexible Box Layout Module Level 1: parsing flex-shrink with invalid values</title>
|
||||
<link rel="author" title="Eric Willigers" href="mailto:ericwilligers@chromium.org">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-flexbox/#propdef-flex-shrink">
|
||||
<meta name="assert" content="flex-shrink supports only the grammar '<number>'.">
|
||||
<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("flex-shrink", "2e3.4");
|
||||
test_invalid_value("flex-shrink", "-+5");
|
||||
test_invalid_value("flex-shrink", "6 7");
|
||||
|
||||
test_invalid_value("flex-shrink", "1."); // Accepted by Edge.
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,21 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Flexible Box Layout Module Level 1: parsing flex-shrink with valid values</title>
|
||||
<link rel="author" title="Eric Willigers" href="mailto:ericwilligers@chromium.org">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-flexbox/#propdef-flex-shrink">
|
||||
<meta name="assert" content="flex-shrink supports the full grammar '<number>'.">
|
||||
<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("flex-shrink", "1");
|
||||
test_valid_value("flex-shrink", "23.4e5", ["2.34e+06", "2.34e+006", "2340000"]);
|
||||
test_valid_value("flex-shrink", "+.678E9", ["6.78e+08", "6.78e+008", "678000000"]);
|
||||
test_valid_value("flex-shrink", ".0", "0");
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,26 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Flexible Box Layout Module Level 1: parsing flex with valid values</title>
|
||||
<link rel="author" title="Eric Willigers" href="mailto:ericwilligers@chromium.org">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-flexbox/#propdef-flex">
|
||||
<meta name="assert" content="flex supports the full grammar 'none | [ <‘flex-grow’> <‘flex-shrink’>? || <‘flex-basis’> ]'.">
|
||||
<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("flex", "none", "0 0 auto");
|
||||
test_valid_value("flex", "1", "1 1 0%");
|
||||
test_valid_value("flex", "2 3", "2 3 0%");
|
||||
test_valid_value("flex", "4 5 6px");
|
||||
test_valid_value("flex", "7% 8", "8 1 7%");
|
||||
test_valid_value("flex", "8 auto", "8 1 auto");
|
||||
|
||||
// The following is not yet supported by browsers:
|
||||
// test_valid_value("flex", "content");
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,19 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Flexible Box Layout Module Level 1: parsing flex-wrap with invalid values</title>
|
||||
<link rel="author" title="Eric Willigers" href="mailto:ericwilligers@chromium.org">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-flexbox/#propdef-flex-wrap">
|
||||
<meta name="assert" content="flex-wrap supports only the grammar 'nowrap | wrap | wrap-reverse'.">
|
||||
<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("flex-wrap", "auto");
|
||||
test_invalid_value("flex-wrap", "nowrap wrap");
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,20 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Flexible Box Layout Module Level 1: parsing flex-wrap with valid values</title>
|
||||
<link rel="author" title="Eric Willigers" href="mailto:ericwilligers@chromium.org">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-flexbox/#propdef-flex-wrap">
|
||||
<meta name="assert" content="flex-wrap supports the full grammar 'nowrap | wrap | wrap-reverse'.">
|
||||
<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("flex-wrap", "nowrap");
|
||||
test_valid_value("flex-wrap", "wrap");
|
||||
test_valid_value("flex-wrap", "wrap-reverse");
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,20 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Flexible Box Layout Module Level 1: parsing order with invalid values</title>
|
||||
<link rel="author" title="Eric Willigers" href="mailto:ericwilligers@chromium.org">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-flexbox/#propdef-order">
|
||||
<meta name="assert" content="order supports only the grammar '<integer>'.">
|
||||
<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("order", "auto");
|
||||
test_invalid_value("order", "123.45");
|
||||
test_invalid_value("order", "123 45");
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,20 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Flexible Box Layout Module Level 1: parsing order with valid values</title>
|
||||
<link rel="author" title="Eric Willigers" href="mailto:ericwilligers@chromium.org">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-flexbox/#propdef-order">
|
||||
<meta name="assert" content="order supports the full grammar '<integer>'.">
|
||||
<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("order", "0");
|
||||
test_valid_value("order", "123");
|
||||
test_valid_value("order", "-45");
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -41,19 +41,19 @@
|
|||
|
||||
<div class="container relative">
|
||||
<div class="grid">
|
||||
<div class="sizedToGridArea absolute autoRowAutoColumn" data-offset-x="35" data-offset-y="5" data-expected-width="500" data-expected-height="400"></div>
|
||||
<div class="sizedToGridArea absolute autoRowAutoColumn" data-offset-x="50" data-offset-y="10" data-expected-width="500" data-expected-height="400"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="container relative">
|
||||
<div class="grid">
|
||||
<div class="sizedToGridArea absolute firstRowFirstColumn" data-offset-x="35" data-offset-y="5" data-expected-width="500" data-expected-height="400"></div>
|
||||
<div class="sizedToGridArea absolute firstRowFirstColumn" data-offset-x="50" data-offset-y="10" data-expected-width="500" data-expected-height="400"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="container relative">
|
||||
<div class="grid">
|
||||
<div class="sizedToGridArea absolute secondRowSecondColumn" data-offset-x="35" data-offset-y="5" data-expected-width="500" data-expected-height="400"></div>
|
||||
<div class="sizedToGridArea absolute secondRowSecondColumn" data-offset-x="50" data-offset-y="10" data-expected-width="500" data-expected-height="400"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
|
@ -77,19 +77,19 @@
|
|||
|
||||
<div class="container relative">
|
||||
<div class="grid directionRTL">
|
||||
<div class="sizedToGridArea absolute autoRowAutoColumn" data-offset-x="-135" data-offset-y="5" data-expected-width="500" data-expected-height="400"></div>
|
||||
<div class="sizedToGridArea absolute autoRowAutoColumn" data-offset-x="-150" data-offset-y="10" data-expected-width="500" data-expected-height="400"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="container relative">
|
||||
<div class="grid directionRTL">
|
||||
<div class="sizedToGridArea absolute firstRowFirstColumn" data-offset-x="-135" data-offset-y="5" data-expected-width="500" data-expected-height="400"></div>
|
||||
<div class="sizedToGridArea absolute firstRowFirstColumn" data-offset-x="-150" data-offset-y="10" data-expected-width="500" data-expected-height="400"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="container relative">
|
||||
<div class="grid directionRTL">
|
||||
<div class="sizedToGridArea absolute secondRowSecondColumn" data-offset-x="-135" data-offset-y="5" data-expected-width="500" data-expected-height="400"></div>
|
||||
<div class="sizedToGridArea absolute secondRowSecondColumn" data-offset-x="-150" data-offset-y="10" data-expected-width="500" data-expected-height="400"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
|
|
|||
4
tests/wpt/web-platform-tests/css/css-inline/META.yml
Normal file
4
tests/wpt/web-platform-tests/css/css-inline/META.yml
Normal file
|
|
@ -0,0 +1,4 @@
|
|||
spec: https://drafts.csswg.org/css-fonts/
|
||||
suggested_reviewers:
|
||||
- dauwhe
|
||||
- fantasai
|
||||
29
tests/wpt/web-platform-tests/css/css-inline/inheritance.html
Normal file
29
tests/wpt/web-platform-tests/css/css-inline/inheritance.html
Normal file
|
|
@ -0,0 +1,29 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>Inheritance of CSS Inline Layout properties</title>
|
||||
<link rel="author" title="Eric Willigers" href="mailto:ericwilligers@chromium.org">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-inline-3/#property-index">
|
||||
<meta name="assert" content="Properties inherit or not according to the spec.">
|
||||
<meta name="assert" content="Properties have initial values according to the spec.">
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<script src="/css/support/inheritance-testcommon.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<div id="container">
|
||||
<div id="target"></div>
|
||||
</div>
|
||||
<script>
|
||||
assert_not_inherited('alignment-baseline', 'baseline', 'central');
|
||||
assert_not_inherited('baseline-shift', '0px', '10px');
|
||||
assert_inherited('dominant-baseline', 'normal', 'central');
|
||||
assert_not_inherited('initial-letters', 'normal', '2 3');
|
||||
assert_inherited('initial-letters-align', 'alphabetic', 'hanging');
|
||||
assert_inherited('initial-letters-wrap', 'none', 'grid');
|
||||
assert_not_inherited('initial-sizing', 'normal', 'stretch');
|
||||
assert_not_inherited('vertical-align', 'baseline', '10px');
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,9 @@
|
|||
<link rel="help" href="https://drafts.csswg.org/css-tables-3/">
|
||||
<meta name="assert" content="This test checks that table cell children, in quirks mode, don't apply the percentage height quirk to their children." />
|
||||
<link rel="match" href="../reference/ref-filled-green-100px-square-only.html">
|
||||
<p style="margin-top: 1em;">Test passes if there is a filled green square.</p>
|
||||
<div style="display:table-cell; height:100px; background:green;">
|
||||
<div style="width:100px;">
|
||||
<div style="height:100%; background:red;"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -0,0 +1,9 @@
|
|||
<link rel="help" href="https://drafts.csswg.org/css-tables-3/">
|
||||
<meta name="assert" content="This test checks that table cell children, in quirks mode, pass the correct percentage resolution size to their children." />
|
||||
<link rel="match" href="../reference/ref-filled-green-100px-square-only.html">
|
||||
<p style="margin-top: 1em;">Test passes if there is a filled green square.</p>
|
||||
<div style="display:table-cell; height:100px; background:red;">
|
||||
<div style="width:100px; height: 100%;">
|
||||
<div style="height:100%; background:green;"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -0,0 +1,27 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Text Test: no automatic hyphenation without language tagging</title>
|
||||
<link rel="author" title="Florian Rivoal" href="http://florian.rivoal.net/">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-text-3/#hyphens-property">
|
||||
<meta name="flags" content="">
|
||||
<link rel="match" href="reference/hyphens-auto-001-ref.html">
|
||||
<meta name="assert" content="automatic hyphenation must not work without language tagging">
|
||||
<style>
|
||||
div {
|
||||
width: 4ch;
|
||||
hyphens: auto;
|
||||
}
|
||||
</style>
|
||||
|
||||
<p>Test passes if none of the words below are hyphenated.
|
||||
<div>implementation
|
||||
initialization
|
||||
realization
|
||||
hyphenation
|
||||
anticonstitutionnellement
|
||||
intergouvernementalisation
|
||||
dichlorodiphényltrichloroéthane
|
||||
honorificabilitudinitatibus
|
||||
Wiedervereinigung
|
||||
Rechtsschutzversicherungsgesellschaften</div>
|
||||
|
||||
|
|
@ -0,0 +1,20 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Text Test Reference</title>
|
||||
<link rel="author" title="Florian Rivoal" href="http://florian.rivoal.net/">
|
||||
<style>
|
||||
div { white-space: pre; }
|
||||
</style>
|
||||
|
||||
<p>Test passes if none of the words below are hyphenated.
|
||||
<div>implementation
|
||||
initialization
|
||||
realization
|
||||
hyphenation
|
||||
anticonstitutionnellement
|
||||
intergouvernementalisation
|
||||
dichlorodiphényltrichloroéthane
|
||||
honorificabilitudinitatibus
|
||||
Wiedervereinigung
|
||||
Rechtsschutzversicherungsgesellschaften</div>
|
||||
|
||||
|
|
@ -0,0 +1,18 @@
|
|||
<!DOCTYPE html>
|
||||
|
||||
<title>Historical CSS Transition features must be removed</title>
|
||||
<link rel="help" href="http://www.w3.org/TR/css3-transitions">
|
||||
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<script>
|
||||
function isInterfaceNuked(name) {
|
||||
test(function() {
|
||||
assert_equals(window[name], undefined)
|
||||
}, "Historical CSS features must be removed: " + name)
|
||||
}
|
||||
var nukedInterfaces = [
|
||||
"WebKitTransitionEvent", // Replaced by unprefixed TransitionEvent
|
||||
];
|
||||
nukedInterfaces.forEach(isInterfaceNuked);
|
||||
</script>
|
||||
|
|
@ -0,0 +1,24 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>Inheritance of CSS Transitions properties</title>
|
||||
<link rel="help" href="https://drafts.csswg.org/css-transitions/#property-index">
|
||||
<meta name="assert" content="Properties inherit or not according to the spec.">
|
||||
<meta name="assert" content="Properties have initial values according to the spec.">
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<script src="/css/support/inheritance-testcommon.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<div id="container">
|
||||
<div id="target"></div>
|
||||
</div>
|
||||
<script>
|
||||
assert_not_inherited('transition-delay', '0s', '2s');
|
||||
assert_not_inherited('transition-duration', '0s', '3s');
|
||||
assert_not_inherited('transition-property', 'all', 'opacity');
|
||||
assert_not_inherited('transition-timing-function', 'ease', 'linear');
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,21 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSSOM: resolved values of the inset properties for absolute positioning</title>
|
||||
<link rel="help" href="https://drafts.csswg.org/cssom/#resolved-value">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-position/#pos-sch">
|
||||
<link rel="author" title="Oriol Brufau" href="mailto:obrufau@crisal.io">
|
||||
<script src=/resources/testharness.js></script>
|
||||
<script src=/resources/testharnessreport.js></script>
|
||||
<script type="module">
|
||||
import {runTests, containerForAbspos} from "./support/getComputedStyle-insets.js";
|
||||
runTests({
|
||||
style: "position: absolute",
|
||||
containingBlockElement: containerForAbspos,
|
||||
containingBlockArea: "padding",
|
||||
preservesPercentages: false,
|
||||
preservesAuto: false,
|
||||
canStretchAutoSize: true,
|
||||
staticPositionY: 1 + 2 + 4 + 8,
|
||||
staticPositionX: 2 + 4 + 8 + 16,
|
||||
});
|
||||
</script>
|
||||
|
|
@ -0,0 +1,21 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSSOM: resolved values of the inset properties for fixed positioning</title>
|
||||
<link rel="help" href="https://drafts.csswg.org/cssom/#resolved-value">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-position/#pos-sch">
|
||||
<link rel="author" title="Oriol Brufau" href="mailto:obrufau@crisal.io">
|
||||
<script src=/resources/testharness.js></script>
|
||||
<script src=/resources/testharnessreport.js></script>
|
||||
<script type="module">
|
||||
import {runTests, containerForFixed} from "./support/getComputedStyle-insets.js";
|
||||
runTests({
|
||||
style: "position: fixed",
|
||||
containingBlockElement: containerForFixed,
|
||||
containingBlockArea: "padding",
|
||||
preservesPercentages: false,
|
||||
preservesAuto: false,
|
||||
canStretchAutoSize: true,
|
||||
staticPositionY: 1 + 2 + 4 + 8 + 16 + 32 + 64,
|
||||
staticPositionX: 2 + 4 + 8 + 16 + 32 + 64 + 128,
|
||||
});
|
||||
</script>
|
||||
|
|
@ -0,0 +1,18 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSSOM: resolved values of the inset properties when the element generates no box</title>
|
||||
<link rel="help" href="https://drafts.csswg.org/cssom/#resolved-value">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-position/#pos-sch">
|
||||
<link rel="author" title="Oriol Brufau" href="mailto:obrufau@crisal.io">
|
||||
<script src=/resources/testharness.js></script>
|
||||
<script src=/resources/testharnessreport.js></script>
|
||||
<script type="module">
|
||||
import {runTests} from "./support/getComputedStyle-insets.js";
|
||||
runTests({
|
||||
style: "display: none",
|
||||
containingBlockElement: null,
|
||||
preservesPercentages: true,
|
||||
preservesAuto: true,
|
||||
canStretchAutoSize: false,
|
||||
});
|
||||
</script>
|
||||
|
|
@ -0,0 +1,19 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSSOM: resolved values of the inset properties for relative positioning</title>
|
||||
<link rel="help" href="https://drafts.csswg.org/cssom/#resolved-value">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-position/#pos-sch">
|
||||
<link rel="author" title="Oriol Brufau" href="mailto:obrufau@crisal.io">
|
||||
<script src=/resources/testharness.js></script>
|
||||
<script src=/resources/testharnessreport.js></script>
|
||||
<script type="module">
|
||||
import {runTests, containerForInflow} from "./support/getComputedStyle-insets.js";
|
||||
runTests({
|
||||
style: "position: relative",
|
||||
containingBlockElement: containerForInflow,
|
||||
containingBlockArea: "content",
|
||||
preservesPercentages: false,
|
||||
preservesAuto: false,
|
||||
canStretchAutoSize: false,
|
||||
});
|
||||
</script>
|
||||
|
|
@ -0,0 +1,19 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSSOM: resolved values of the inset properties for static positioning</title>
|
||||
<link rel="help" href="https://drafts.csswg.org/cssom/#resolved-value">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-position/#pos-sch">
|
||||
<link rel="author" title="Oriol Brufau" href="mailto:obrufau@crisal.io">
|
||||
<script src=/resources/testharness.js></script>
|
||||
<script src=/resources/testharnessreport.js></script>
|
||||
<script type="module">
|
||||
import {runTests, containerForInflow} from "./support/getComputedStyle-insets.js";
|
||||
runTests({
|
||||
style: "position: static",
|
||||
containingBlockElement: containerForInflow,
|
||||
containingBlockArea: "content",
|
||||
preservesPercentages: true,
|
||||
preservesAuto: true,
|
||||
canStretchAutoSize: false,
|
||||
});
|
||||
</script>
|
||||
|
|
@ -0,0 +1,19 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSSOM: resolved values of the inset properties for sticky positioning</title>
|
||||
<link rel="help" href="https://drafts.csswg.org/cssom/#resolved-value">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-position/#pos-sch">
|
||||
<link rel="author" title="Oriol Brufau" href="mailto:obrufau@crisal.io">
|
||||
<script src=/resources/testharness.js></script>
|
||||
<script src=/resources/testharnessreport.js></script>
|
||||
<script type="module">
|
||||
import {runTests, containerForInflow} from "./support/getComputedStyle-insets.js";
|
||||
runTests({
|
||||
style: "position: sticky; position: -webkit-sticky",
|
||||
containingBlockElement: containerForInflow,
|
||||
containingBlockArea: "content",
|
||||
preservesPercentages: false,
|
||||
preservesAuto: true,
|
||||
canStretchAutoSize: false,
|
||||
});
|
||||
</script>
|
||||
|
|
@ -70,8 +70,17 @@
|
|||
const testElem = document.getElementById("test");
|
||||
testElem.style.setProperty("margin-top", "initial", "important");
|
||||
assert_equals(testElem.style.margin, "");
|
||||
assert_equals(testElem.style.cssText, "margin-top: initial !important; margin-right: initial; margin-bottom: initial; margin-left: initial;");
|
||||
}, "Shorthand serialization with 'initial' value, one longhand with important flag.");
|
||||
|
||||
test(function() {
|
||||
const testElem = document.getElementById("test");
|
||||
testElem.style.cssText = "";
|
||||
testElem.style.setProperty("margin-top", "initial");
|
||||
testElem.style.setProperty("margin-right", "initial");
|
||||
testElem.style.setProperty("margin-bottom", "initial");
|
||||
testElem.style.setProperty("margin-left", "initial", "important");
|
||||
assert_equals(testElem.style.margin, "");
|
||||
}, "Shorthand serialization with 'initial' value, longhands set individually, one with important flag.");
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,376 @@
|
|||
export const testEl = document.createElement("div");
|
||||
export const containerForInflow = document.createElement("div");
|
||||
export const containerForAbspos = document.createElement("div");
|
||||
export const containerForFixed = document.createElement("div");
|
||||
|
||||
testEl.id = "test";
|
||||
containerForInflow.id = "container-for-inflow";
|
||||
containerForAbspos.id = "container-for-abspos";
|
||||
containerForFixed.id = "container-for-fixed";
|
||||
|
||||
containerForInflow.appendChild(testEl);
|
||||
containerForAbspos.appendChild(containerForInflow);
|
||||
containerForFixed.appendChild(containerForAbspos);
|
||||
document.body.appendChild(containerForFixed);
|
||||
|
||||
const stylesheet = document.createElement("style");
|
||||
stylesheet.textContent = `
|
||||
#container-for-inflow {
|
||||
/* Content area: 100px tall, 200px wide */
|
||||
height: 100px;
|
||||
width: 200px;
|
||||
padding: 1px 2px;
|
||||
border-width: 2px 4px;
|
||||
margin: 4px 8px;
|
||||
overflow: hidden;
|
||||
}
|
||||
#container-for-abspos {
|
||||
/* Padding area: 200px tall, 400px wide */
|
||||
height: 184px;
|
||||
width: 368px;
|
||||
padding: 8px 16px;
|
||||
border-width: 16px 32px;
|
||||
margin: 32px 64px;
|
||||
position: relative;
|
||||
}
|
||||
#container-for-fixed {
|
||||
/* Padding area: 300px tall, 600px wide */
|
||||
height: 172px;
|
||||
width: 344px;
|
||||
padding: 64px 128px;
|
||||
border-width: 128px 256px;
|
||||
margin: 256px 512px;
|
||||
position: absolute;
|
||||
transform: scale(1);
|
||||
visibility: hidden;
|
||||
}
|
||||
[id ^= container] {
|
||||
border-style: solid;
|
||||
}
|
||||
`;
|
||||
document.head.appendChild(stylesheet);
|
||||
|
||||
function runTestsWithWM(data, testWM, cbWM) {
|
||||
const {
|
||||
style,
|
||||
containingBlockElement,
|
||||
containingBlockArea,
|
||||
preservesPercentages,
|
||||
preservesAuto,
|
||||
canStretchAutoSize,
|
||||
staticPositionX,
|
||||
staticPositionY,
|
||||
} = data;
|
||||
|
||||
let cbHeight = containingBlockElement ? containingBlockElement.clientHeight : NaN;
|
||||
let cbWidth = containingBlockElement ? containingBlockElement.clientWidth : NaN;
|
||||
if (containingBlockElement && containingBlockArea == "content") {
|
||||
const cs = getComputedStyle(containingBlockElement);
|
||||
cbHeight -= parseFloat(cs.paddingTop) + parseFloat(cs.paddingBottom);
|
||||
cbWidth -= parseFloat(cs.paddingLeft) + parseFloat(cs.paddingRight);
|
||||
}
|
||||
|
||||
const staticPositionTop = cbWM.blockStart == "top" || cbWM.inlineStart == "top"
|
||||
? staticPositionY : cbHeight - staticPositionY;
|
||||
const staticPositionLeft = cbWM.blockStart == "left" || cbWM.inlineStart == "left"
|
||||
? staticPositionX : cbWidth - staticPositionX;
|
||||
const staticPositionBottom = cbWM.blockStart == "bottom" || cbWM.inlineStart == "bottom"
|
||||
? staticPositionY : cbHeight - staticPositionY;
|
||||
const staticPositionRight = cbWM.blockStart == "right" || cbWM.inlineStart == "right"
|
||||
? staticPositionX : cbWidth - staticPositionX;
|
||||
|
||||
function serialize(declarations) {
|
||||
return Object.entries(declarations).map(([p, v]) => `${p}: ${v}; `).join("");
|
||||
}
|
||||
|
||||
function wmName(wm) {
|
||||
return Object.values(wm.style).join(" ");
|
||||
}
|
||||
|
||||
function checkStyle(declarations, expected, msg) {
|
||||
test(function() {
|
||||
testEl.style.cssText = style + "; " + serialize({...declarations, ...testWM.style});
|
||||
if (containingBlockElement) {
|
||||
containingBlockElement.style.cssText = serialize({...cbWM.style});
|
||||
}
|
||||
const cs = getComputedStyle(testEl);
|
||||
for (let [prop, value] of Object.entries(expected)) {
|
||||
assert_equals(cs[prop], value, `'${prop}'`);
|
||||
}
|
||||
}, `${wmName(testWM)} inside ${wmName(cbWM)} - ${msg}`);
|
||||
|
||||
testEl.style.cssText = "";
|
||||
if (containingBlockElement) {
|
||||
containingBlockElement.style.cssText = "";
|
||||
}
|
||||
}
|
||||
|
||||
checkStyle({
|
||||
top: "1px",
|
||||
left: "2px",
|
||||
bottom: "3px",
|
||||
right: "4px",
|
||||
}, {
|
||||
top: "1px",
|
||||
left: "2px",
|
||||
bottom: "3px",
|
||||
right: "4px",
|
||||
}, "Pixels resolve as-is");
|
||||
|
||||
checkStyle({
|
||||
top: "1em",
|
||||
left: "2em",
|
||||
bottom: "3em",
|
||||
right: "4em",
|
||||
"font-size": "10px",
|
||||
}, {
|
||||
top: "10px",
|
||||
left: "20px",
|
||||
bottom: "30px",
|
||||
right: "40px",
|
||||
}, "Relative lengths are absolutized into pixels");
|
||||
|
||||
if (preservesPercentages) {
|
||||
checkStyle({
|
||||
top: "10%",
|
||||
left: "25%",
|
||||
bottom: "50%",
|
||||
right: "75%",
|
||||
}, {
|
||||
top: "10%",
|
||||
left: "25%",
|
||||
bottom: "50%",
|
||||
right: "75%",
|
||||
}, "Percentages resolve as-is");
|
||||
} else {
|
||||
checkStyle({
|
||||
top: "10%",
|
||||
left: "25%",
|
||||
bottom: "50%",
|
||||
right: "75%",
|
||||
}, {
|
||||
top: .1 * cbHeight + "px",
|
||||
left: .25 * cbWidth + "px",
|
||||
bottom: .5 * cbHeight + "px",
|
||||
right: .75 * cbWidth + "px",
|
||||
}, "Percentages are absolutized into pixels");
|
||||
|
||||
checkStyle({
|
||||
top: "calc(10% - 1px)",
|
||||
left: "calc(25% - 2px)",
|
||||
bottom: "calc(50% - 3px)",
|
||||
right: "calc(75% - 4px)",
|
||||
}, {
|
||||
top: .1 * cbHeight - 1 + "px",
|
||||
left: .25 * cbWidth - 2 + "px",
|
||||
bottom: .5 * cbHeight - 3 + "px",
|
||||
right: .75 * cbWidth - 4 + "px",
|
||||
}, "calc() is absolutized into pixels");
|
||||
}
|
||||
|
||||
if (canStretchAutoSize) {
|
||||
// Force overconstraintment by setting size or with insets that would result in
|
||||
// negative size. Then the resolved value should be the computed one according to
|
||||
// https://drafts.csswg.org/cssom/#resolved-value-special-case-property-like-top
|
||||
|
||||
checkStyle({
|
||||
top: "1px",
|
||||
left: "2px",
|
||||
bottom: "3px",
|
||||
right: "4px",
|
||||
height: "0px",
|
||||
width: "0px",
|
||||
}, {
|
||||
top: "1px",
|
||||
left: "2px",
|
||||
bottom: "3px",
|
||||
right: "4px",
|
||||
}, "Pixels resolve as-is when overconstrained");
|
||||
|
||||
checkStyle({
|
||||
top: "100%",
|
||||
left: "100%",
|
||||
bottom: "100%",
|
||||
right: "100%",
|
||||
}, {
|
||||
top: cbHeight + "px",
|
||||
left: cbWidth + "px",
|
||||
bottom: cbHeight + "px",
|
||||
right: cbWidth + "px",
|
||||
}, "Percentages absolutize the computed value when overconstrained");
|
||||
}
|
||||
|
||||
if (preservesAuto) {
|
||||
checkStyle({
|
||||
top: "auto",
|
||||
left: "auto",
|
||||
bottom: "3px",
|
||||
right: "4px",
|
||||
}, {
|
||||
top: "auto",
|
||||
left: "auto",
|
||||
bottom: "3px",
|
||||
right: "4px",
|
||||
}, "If start side is 'auto' and end side is not, 'auto' resolves as-is");
|
||||
|
||||
checkStyle({
|
||||
top: "1px",
|
||||
left: "2px",
|
||||
bottom: "auto",
|
||||
right: "auto",
|
||||
}, {
|
||||
top: "1px",
|
||||
left: "2px",
|
||||
bottom: "auto",
|
||||
right: "auto",
|
||||
}, "If end side is 'auto' and start side is not, 'auto' resolves as-is");
|
||||
|
||||
checkStyle({
|
||||
top: "auto",
|
||||
left: "auto",
|
||||
bottom: "auto",
|
||||
right: "auto",
|
||||
}, {
|
||||
top: "auto",
|
||||
left: "auto",
|
||||
bottom: "auto",
|
||||
right: "auto",
|
||||
}, "If opposite sides are 'auto', they resolve as-is");
|
||||
} else if (canStretchAutoSize) {
|
||||
checkStyle({
|
||||
top: "auto",
|
||||
left: "auto",
|
||||
bottom: "3px",
|
||||
right: "4px",
|
||||
}, {
|
||||
top: cbHeight - 3 + "px",
|
||||
left: cbWidth - 4 + "px",
|
||||
bottom: "3px",
|
||||
right: "4px",
|
||||
}, "If start side is 'auto' and end side is not, 'auto' resolves to used value");
|
||||
|
||||
checkStyle({
|
||||
top: "1px",
|
||||
left: "2px",
|
||||
bottom: "auto",
|
||||
right: "auto",
|
||||
}, {
|
||||
top: "1px",
|
||||
left: "2px",
|
||||
bottom: cbHeight - 1 + "px",
|
||||
right: cbWidth - 2 + "px",
|
||||
}, "If end side is 'auto' and start side is not, 'auto' resolves to used value");
|
||||
|
||||
checkStyle({
|
||||
top: "auto",
|
||||
left: "auto",
|
||||
bottom: "auto",
|
||||
right: "auto",
|
||||
}, {
|
||||
top: staticPositionTop + "px",
|
||||
left: staticPositionLeft + "px",
|
||||
bottom: staticPositionBottom + "px",
|
||||
right: staticPositionRight + "px",
|
||||
}, "If opposite sides are 'auto', they resolve to used value");
|
||||
} else {
|
||||
checkStyle({
|
||||
top: "auto",
|
||||
left: "auto",
|
||||
bottom: "3px",
|
||||
right: "4px",
|
||||
}, {
|
||||
top: "-3px",
|
||||
left: "-4px",
|
||||
bottom: "3px",
|
||||
right: "4px",
|
||||
}, "If start side is 'auto' and end side is not, 'auto' resolves to used value");
|
||||
|
||||
checkStyle({
|
||||
top: "1px",
|
||||
left: "2px",
|
||||
bottom: "auto",
|
||||
right: "auto",
|
||||
}, {
|
||||
top: "1px",
|
||||
left: "2px",
|
||||
bottom: "-1px",
|
||||
right: "-2px",
|
||||
}, "If end side is 'auto' and start side is not, 'auto' resolves to used value");
|
||||
|
||||
checkStyle({
|
||||
top: "auto",
|
||||
left: "auto",
|
||||
bottom: "auto",
|
||||
right: "auto",
|
||||
}, {
|
||||
top: "0px",
|
||||
left: "0px",
|
||||
bottom: "0px",
|
||||
right: "0px",
|
||||
}, "If opposite sides are 'auto', they resolve to used value");
|
||||
}
|
||||
}
|
||||
|
||||
const writingModes = [{
|
||||
style: {
|
||||
"writing-mode": "horizontal-tb",
|
||||
"direction": "ltr",
|
||||
},
|
||||
blockStart: "top",
|
||||
blockEnd: "bottom",
|
||||
inlineStart: "left",
|
||||
inlineEnd: "right",
|
||||
}, {
|
||||
style: {
|
||||
"writing-mode": "horizontal-tb",
|
||||
"direction": "rtl",
|
||||
},
|
||||
blockStart: "top",
|
||||
blockEnd: "bottom",
|
||||
inlineStart: "right",
|
||||
inlineEnd: "left",
|
||||
}, {
|
||||
style: {
|
||||
"writing-mode": "vertical-lr",
|
||||
"direction": "ltr",
|
||||
},
|
||||
blockStart: "left",
|
||||
blockEnd: "right",
|
||||
inlineStart: "top",
|
||||
inlineEnd: "bottom",
|
||||
}, {
|
||||
style: {
|
||||
"writing-mode": "vertical-lr",
|
||||
"direction": "rtl",
|
||||
},
|
||||
blockStart: "left",
|
||||
blockEnd: "right",
|
||||
inlineStart: "bottom",
|
||||
inlineEnd: "top",
|
||||
}, {
|
||||
style: {
|
||||
"writing-mode": "vertical-rl",
|
||||
"direction": "ltr",
|
||||
},
|
||||
blockStart: "right",
|
||||
blockEnd: "left",
|
||||
inlineStart: "top",
|
||||
inlineEnd: "bottom",
|
||||
}, {
|
||||
style: {
|
||||
"writing-mode": "vertical-rl",
|
||||
"direction": "rtl",
|
||||
},
|
||||
blockStart: "right",
|
||||
blockEnd: "left",
|
||||
inlineStart: "bottom",
|
||||
inlineEnd: "top",
|
||||
}];
|
||||
|
||||
export function runTests(data) {
|
||||
for (let testWM of writingModes) {
|
||||
for (let cbWM of writingModes) {
|
||||
runTestsWithWM(data, testWM, cbWM);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,54 @@
|
|||
'use strict';
|
||||
|
||||
function assert_initial(property, initial) {
|
||||
test(() => {
|
||||
if (!getComputedStyle(target)[property])
|
||||
return;
|
||||
target.style[property] = 'initial';
|
||||
assert_equals(getComputedStyle(target)[property], initial);
|
||||
target.style[property] = '';
|
||||
}, 'Property ' + property + ' has initial value ' + initial);
|
||||
}
|
||||
|
||||
function assert_inherited(property, initial, other) {
|
||||
assert_initial(property, initial);
|
||||
|
||||
test(() => {
|
||||
if (!getComputedStyle(target)[property])
|
||||
return;
|
||||
container.style[property] = 'initial';
|
||||
target.style[property] = 'unset';
|
||||
assert_not_equals(getComputedStyle(container)[property], other);
|
||||
assert_not_equals(getComputedStyle(target)[property], other);
|
||||
container.style[property] = other;
|
||||
assert_equals(getComputedStyle(container)[property], other);
|
||||
assert_equals(getComputedStyle(target)[property], other);
|
||||
target.style[property] = 'initial';
|
||||
assert_not_equals(getComputedStyle(container)[property], other);
|
||||
assert_not_equals(getComputedStyle(target)[property], other);
|
||||
target.style[property] = 'inherit';
|
||||
assert_equals(getComputedStyle(container)[property], other);
|
||||
container.style[property] = '';
|
||||
target.style[property] = '';
|
||||
}, 'Property ' + property + ' inherits');
|
||||
}
|
||||
|
||||
function assert_not_inherited(property, initial, other) {
|
||||
assert_initial(property, initial);
|
||||
|
||||
test(() => {
|
||||
if (!getComputedStyle(target)[property])
|
||||
return;
|
||||
container.style[property] = 'initial';
|
||||
target.style[property] = 'unset';
|
||||
assert_not_equals(getComputedStyle(container)[property], other);
|
||||
assert_not_equals(getComputedStyle(target)[property], other);
|
||||
container.style[property] = other;
|
||||
assert_equals(getComputedStyle(container)[property], other);
|
||||
assert_not_equals(getComputedStyle(target)[property], other);
|
||||
target.style[property] = 'inherit';
|
||||
assert_equals(getComputedStyle(target)[property], other);
|
||||
container.style[property] = '';
|
||||
target.style[property] = '';
|
||||
}, 'Property ' + property + ' does not inherit');
|
||||
}
|
||||
|
|
@ -11,6 +11,7 @@
|
|||
<style>
|
||||
.container {
|
||||
display: block;
|
||||
padding: 1px 2px;
|
||||
border: 1px solid black;
|
||||
background: yellow;
|
||||
margin-bottom: 5px;
|
||||
|
|
@ -20,12 +21,12 @@
|
|||
br { clear: both }
|
||||
|
||||
.big > .container {
|
||||
height: 32px;
|
||||
width: 26px;
|
||||
height: 30px;
|
||||
width: 22px;
|
||||
}
|
||||
.small > .container {
|
||||
height: 4px;
|
||||
width: 8px;
|
||||
height: 2px;
|
||||
width: 4px;
|
||||
}
|
||||
|
||||
.container > * {
|
||||
|
|
|
|||
|
|
@ -11,6 +11,7 @@
|
|||
<style>
|
||||
.container {
|
||||
display: block;
|
||||
padding: 1px 2px;
|
||||
border: 1px solid black;
|
||||
background: yellow;
|
||||
margin-bottom: 5px;
|
||||
|
|
@ -20,12 +21,12 @@
|
|||
br { clear: both }
|
||||
|
||||
.big > .container {
|
||||
height: 42px;
|
||||
width: 26px;
|
||||
height: 40px;
|
||||
width: 22px;
|
||||
}
|
||||
.small > .container {
|
||||
height: 4px;
|
||||
width: 8px;
|
||||
height: 2px;
|
||||
width: 4px;
|
||||
margin-bottom: 20px; /* to reduce overlap between overflowing images */
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -11,6 +11,7 @@
|
|||
<style>
|
||||
.container {
|
||||
display: block;
|
||||
padding: 1px 2px;
|
||||
border: 1px solid black;
|
||||
background: yellow;
|
||||
margin-bottom: 5px;
|
||||
|
|
@ -20,12 +21,12 @@
|
|||
br { clear: both }
|
||||
|
||||
.big > .container {
|
||||
height: 32px;
|
||||
width: 26px;
|
||||
height: 30px;
|
||||
width: 22px;
|
||||
}
|
||||
.small > .container {
|
||||
height: 4px;
|
||||
width: 8px;
|
||||
height: 2px;
|
||||
width: 4px;
|
||||
}
|
||||
|
||||
.container > * {
|
||||
|
|
@ -33,8 +34,8 @@
|
|||
height: 6px;
|
||||
width: 8px;
|
||||
}
|
||||
.big > .container > * { margin-left: 18px; }
|
||||
.small > .container > * { margin-left: 0px; }
|
||||
.big > .container > * { margin-left: 14px; }
|
||||
.small > .container > * { margin-left: -4px; }
|
||||
|
||||
.big .alignStart { margin-top: 0px; }
|
||||
.big .alignCenter { margin-top: 13px; }
|
||||
|
|
|
|||
|
|
@ -11,6 +11,7 @@
|
|||
<style>
|
||||
.container {
|
||||
display: block;
|
||||
padding: 1px 2px;
|
||||
border: 1px solid black;
|
||||
background: yellow;
|
||||
margin-bottom: 5px;
|
||||
|
|
@ -20,12 +21,12 @@
|
|||
br { clear: both }
|
||||
|
||||
.big > .container {
|
||||
height: 32px;
|
||||
width: 26px;
|
||||
height: 30px;
|
||||
width: 22px;
|
||||
}
|
||||
.small > .container {
|
||||
height: 4px;
|
||||
width: 8px;
|
||||
height: 2px;
|
||||
width: 4px;
|
||||
}
|
||||
|
||||
.container > * {
|
||||
|
|
@ -33,8 +34,8 @@
|
|||
height: 6px;
|
||||
width: 8px;
|
||||
}
|
||||
.big > .container > * { margin-left: 18px; }
|
||||
.small > .container > * { margin-left: 0px; }
|
||||
.big > .container > * { margin-left: 14px; }
|
||||
.small > .container > * { margin-left: -4px; }
|
||||
|
||||
.big .alignStart { margin-top: 0px; }
|
||||
.big .alignCenter { margin-top: 13px; }
|
||||
|
|
|
|||
|
|
@ -11,6 +11,7 @@
|
|||
<style>
|
||||
.container {
|
||||
display: block;
|
||||
padding: 2px 1px;
|
||||
border: 1px solid black;
|
||||
background: yellow;
|
||||
margin-bottom: 5px;
|
||||
|
|
@ -20,12 +21,12 @@
|
|||
br { clear: both }
|
||||
|
||||
.big > .container {
|
||||
width: 32px;
|
||||
height: 26px;
|
||||
width: 30px;
|
||||
height: 22px;
|
||||
}
|
||||
.small > .container {
|
||||
width: 4px;
|
||||
height: 8px;
|
||||
width: 2px;
|
||||
height: 4px;
|
||||
margin-right: 10px; /* To avoid overlap between overflowing kids */
|
||||
}
|
||||
|
||||
|
|
@ -34,12 +35,12 @@
|
|||
width: 6px;
|
||||
height: 8px;
|
||||
}
|
||||
.big .alignStart { margin-left: 26px; }
|
||||
.big .alignCenter { margin-left: 13px; }
|
||||
.big .alignEnd { margin-left: 0px; }
|
||||
.small .alignStart { margin-left: -2px; }
|
||||
.small .alignCenter { margin-left: -1px; }
|
||||
.small .alignEnd { margin-left: 0px; }
|
||||
.big .alignStart { margin-left: 24px; }
|
||||
.big .alignCenter { margin-left: 11px; }
|
||||
.big .alignEnd { margin-left: -2px; }
|
||||
.small .alignStart { margin-left: -4px; }
|
||||
.small .alignCenter { margin-left: -3px; }
|
||||
.small .alignEnd { margin-left: -2px; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
|
|
|||
|
|
@ -11,6 +11,7 @@
|
|||
<style>
|
||||
.container {
|
||||
display: block;
|
||||
padding: 2px 1px;
|
||||
border: 1px solid black;
|
||||
background: yellow;
|
||||
margin-bottom: 5px;
|
||||
|
|
@ -20,12 +21,12 @@
|
|||
br { clear: both }
|
||||
|
||||
.big > .container {
|
||||
width: 32px;
|
||||
height: 26px;
|
||||
width: 30px;
|
||||
height: 22px;
|
||||
}
|
||||
.small > .container {
|
||||
width: 4px;
|
||||
height: 8px;
|
||||
width: 2px;
|
||||
height: 4px;
|
||||
margin-right: 10px; /* To avoid overlap between overflowing kids */
|
||||
}
|
||||
|
||||
|
|
@ -34,12 +35,12 @@
|
|||
width: 6px;
|
||||
height: 8px;
|
||||
}
|
||||
.big .alignStart { margin-left: 26px; }
|
||||
.big .alignCenter { margin-left: 13px; }
|
||||
.big .alignEnd { margin-left: 0px; }
|
||||
.small .alignStart { margin-left: -2px; }
|
||||
.small .alignCenter { margin-left: -1px; }
|
||||
.small .alignEnd { margin-left: 0px; }
|
||||
.big .alignStart { margin-left: 24px; }
|
||||
.big .alignCenter { margin-left: 11px; }
|
||||
.big .alignEnd { margin-left: -2px; }
|
||||
.small .alignStart { margin-left: -4px; }
|
||||
.small .alignCenter { margin-left: -3px; }
|
||||
.small .alignEnd { margin-left: -2px; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
|
|
|||
|
|
@ -11,6 +11,7 @@
|
|||
<style>
|
||||
.container {
|
||||
display: block;
|
||||
padding: 2px 1px;
|
||||
border: 1px solid black;
|
||||
background: yellow;
|
||||
margin-bottom: 5px;
|
||||
|
|
@ -20,12 +21,12 @@
|
|||
br { clear: both }
|
||||
|
||||
.big > .container {
|
||||
width: 32px;
|
||||
height: 26px;
|
||||
width: 30px;
|
||||
height: 22px;
|
||||
}
|
||||
.small > .container {
|
||||
width: 4px;
|
||||
height: 8px;
|
||||
width: 2px;
|
||||
height: 4px;
|
||||
margin-right: 10px; /* To avoid overlap between overflowing kids */
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -11,6 +11,7 @@
|
|||
<style>
|
||||
.container {
|
||||
display: block;
|
||||
padding: 2px 1px;
|
||||
border: 1px solid black;
|
||||
background: yellow;
|
||||
margin-bottom: 5px;
|
||||
|
|
@ -20,12 +21,12 @@
|
|||
br { clear: both }
|
||||
|
||||
.big > .container {
|
||||
width: 42px;
|
||||
height: 26px;
|
||||
width: 40px;
|
||||
height: 22px;
|
||||
}
|
||||
.small > .container {
|
||||
width: 4px;
|
||||
height: 8px;
|
||||
width: 2px;
|
||||
height: 4px;
|
||||
margin-bottom: 20px; /* to reduce overlap between overflowing images */
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -11,6 +11,7 @@
|
|||
<style>
|
||||
.container {
|
||||
display: block;
|
||||
padding: 2px 1px;
|
||||
border: 1px solid black;
|
||||
background: yellow;
|
||||
margin-bottom: 5px;
|
||||
|
|
@ -20,12 +21,12 @@
|
|||
br { clear: both }
|
||||
|
||||
.big > .container {
|
||||
width: 32px;
|
||||
height: 26px;
|
||||
width: 30px;
|
||||
height: 22px;
|
||||
}
|
||||
.small > .container {
|
||||
width: 4px;
|
||||
height: 8px;
|
||||
width: 2px;
|
||||
height: 4px;
|
||||
margin-right: 10px; /* To avoid overlap between overflowing kids */
|
||||
}
|
||||
|
||||
|
|
@ -34,12 +35,12 @@
|
|||
width: 6px;
|
||||
height: 8px;
|
||||
}
|
||||
.big .alignStart { margin-left: 26px; }
|
||||
.big .alignCenter { margin-left: 13px; }
|
||||
.big .alignEnd { margin-left: 0px; }
|
||||
.small .alignStart { margin-left: -2px; }
|
||||
.small .alignCenter { margin-left: -1px; }
|
||||
.small .alignEnd { margin-left: 0px; }
|
||||
.big .alignStart { margin-left: 24px; }
|
||||
.big .alignCenter { margin-left: 11px; }
|
||||
.big .alignEnd { margin-left: -2px; }
|
||||
.small .alignStart { margin-left: -4px; }
|
||||
.small .alignCenter { margin-left: -3px; }
|
||||
.small .alignEnd { margin-left: -2px; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
|
|
|||
|
|
@ -11,6 +11,7 @@
|
|||
<style>
|
||||
.container {
|
||||
display: block;
|
||||
padding: 2px 1px;
|
||||
border: 1px solid black;
|
||||
background: yellow;
|
||||
margin-bottom: 5px;
|
||||
|
|
@ -20,12 +21,12 @@
|
|||
br { clear: both }
|
||||
|
||||
.big > .container {
|
||||
width: 32px;
|
||||
height: 26px;
|
||||
width: 30px;
|
||||
height: 22px;
|
||||
}
|
||||
.small > .container {
|
||||
width: 4px;
|
||||
height: 8px;
|
||||
width: 2px;
|
||||
height: 4px;
|
||||
margin-right: 10px; /* To avoid overlap between overflowing kids */
|
||||
}
|
||||
|
||||
|
|
@ -34,12 +35,12 @@
|
|||
width: 6px;
|
||||
height: 8px;
|
||||
}
|
||||
.big .alignStart { margin-left: 26px; }
|
||||
.big .alignCenter { margin-left: 13px; }
|
||||
.big .alignEnd { margin-left: 0px; }
|
||||
.small .alignStart { margin-left: -2px; }
|
||||
.small .alignCenter { margin-left: -1px; }
|
||||
.small .alignEnd { margin-left: 0px; }
|
||||
.big .alignStart { margin-left: 24px; }
|
||||
.big .alignCenter { margin-left: 11px; }
|
||||
.big .alignEnd { margin-left: -2px; }
|
||||
.small .alignStart { margin-left: -4px; }
|
||||
.small .alignCenter { margin-left: -3px; }
|
||||
.small .alignEnd { margin-left: -2px; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
|
|
|||
|
|
@ -11,6 +11,7 @@
|
|||
<style>
|
||||
.container {
|
||||
display: block;
|
||||
padding: 1px 2px;
|
||||
border: 1px solid black;
|
||||
background: yellow;
|
||||
margin-bottom: 5px;
|
||||
|
|
@ -20,12 +21,12 @@
|
|||
br { clear: both }
|
||||
|
||||
.big > .container {
|
||||
height: 32px;
|
||||
width: 26px;
|
||||
height: 30px;
|
||||
width: 22px;
|
||||
}
|
||||
.small > .container {
|
||||
height: 4px;
|
||||
width: 8px;
|
||||
height: 2px;
|
||||
width: 4px;
|
||||
}
|
||||
|
||||
.container > * {
|
||||
|
|
@ -33,8 +34,8 @@
|
|||
height: 6px;
|
||||
width: 8px;
|
||||
}
|
||||
.big > .container > * { margin-left: 18px; }
|
||||
.small > .container > * { margin-left: 0px; }
|
||||
.big > .container > * { margin-left: 14px; }
|
||||
.small > .container > * { margin-left: -4px; }
|
||||
|
||||
.big .alignStart { margin-top: 0px; }
|
||||
.big .alignCenter { margin-top: 13px; }
|
||||
|
|
|
|||
|
|
@ -11,6 +11,7 @@
|
|||
<style>
|
||||
.container {
|
||||
display: block;
|
||||
padding: 1px 2px;
|
||||
border: 1px solid black;
|
||||
background: yellow;
|
||||
margin-bottom: 5px;
|
||||
|
|
@ -20,12 +21,12 @@
|
|||
br { clear: both }
|
||||
|
||||
.big > .container {
|
||||
height: 32px;
|
||||
width: 26px;
|
||||
height: 30px;
|
||||
width: 22px;
|
||||
}
|
||||
.small > .container {
|
||||
height: 4px;
|
||||
width: 8px;
|
||||
height: 2px;
|
||||
width: 4px;
|
||||
}
|
||||
|
||||
.container > * {
|
||||
|
|
@ -33,8 +34,8 @@
|
|||
height: 6px;
|
||||
width: 8px;
|
||||
}
|
||||
.big > .container > * { margin-left: 18px; }
|
||||
.small > .container > * { margin-left: 0px; }
|
||||
.big > .container > * { margin-left: 14px; }
|
||||
.small > .container > * { margin-left: -4px; }
|
||||
|
||||
.big .alignStart { margin-top: 0px; }
|
||||
.big .alignCenter { margin-top: 13px; }
|
||||
|
|
|
|||
|
|
@ -16,7 +16,7 @@
|
|||
== descriptor-prefix.html descriptor-prefix-ref.html
|
||||
== descriptor-suffix.html descriptor-suffix-ref.html
|
||||
== descriptor-range.html descriptor-range-ref.html
|
||||
== descriptor-pad.html descriptor-pad-ref.html
|
||||
== descriptor-pad.html descriptor-pad-ref.html
|
||||
== descriptor-fallback.html descriptor-fallback-ref.html
|
||||
== descriptor-symbols.html descriptor-symbols-ref.html
|
||||
== descriptor-negative-invalid.html descriptor-negative-invalid-ref.html
|
||||
|
|
|
|||
|
|
@ -191,4 +191,4 @@
|
|||
== object-position-svg-002p.html object-position-svg-002-ref.html
|
||||
|
||||
# Tests for gradient color stops with 'currentcolor'
|
||||
== color-stop-currentcolor.html color-stop-currentcolor-ref.html
|
||||
== color-stop-currentcolor.html color-stop-currentcolor-ref.html
|
||||
|
|
|
|||
|
|
@ -132,4 +132,4 @@
|
|||
== text-emphasis-line-height-001z.html text-emphasis-line-height-001-ref.html
|
||||
|
||||
# text-shadow 'currentcolor' test cases
|
||||
== text-shadow-currentcolor.html text-shadow-currentcolor-ref.html
|
||||
== text-shadow-currentcolor.html text-shadow-currentcolor-ref.html
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue