mirror of
https://github.com/servo/servo.git
synced 2025-08-16 02:45:36 +01:00
Update web-platform-tests to revision 097043b336e46876e281ddec3bb014fe9c480128
This commit is contained in:
WPT Sync Bot
parent
ecd32570c0
commit
b68253eac0
405 changed files with 9164 additions and 3050 deletions
|
|
@ -4,7 +4,7 @@
|
|||
<meta charset="utf-8">
|
||||
<title>Inheritance of CSS Fonts Level 3 properties</title>
|
||||
<link rel="help" href="https://www.w3.org/TR/css-fonts-3/#property-index">
|
||||
<link rel="help" href="https://www.w3.org/TR/css-fonts-4/#font-stretch-prop">
|
||||
<link rel="help" href="https://www.w3.org/TR/css-fonts-4/#property-index">
|
||||
<meta name="assert" content="Properties inherit according to the spec.">
|
||||
<meta name="assert" content="Properties have initial values according to the spec.">
|
||||
<script src="/resources/testharness.js"></script>
|
||||
|
|
@ -40,6 +40,7 @@ assert_inherited('font-variant-east-asian', 'normal', 'ruby');
|
|||
assert_inherited('font-variant-ligatures', 'normal', 'none');
|
||||
assert_inherited('font-variant-numeric', 'normal', 'ordinal');
|
||||
assert_inherited('font-variant-position', 'normal', 'super');
|
||||
assert_inherited('font-variation-settings', 'normal', '"wght" 700');
|
||||
assert_inherited('font-weight', '400' /* normal */, '900');
|
||||
</script>
|
||||
</body>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,23 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Fonts Module Level 3: getComputedStyle().fontVariationSettings</title>
|
||||
<link rel="help" href="https://www.w3.org/TR/css-fonts-4/#propdef-font-variation-settings">
|
||||
<meta name="assert" content="font-variation-settings 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('font-variation-settings', 'normal');
|
||||
|
||||
test_computed_value('font-variation-settings', '"wght" 700');
|
||||
test_computed_value('font-variation-settings', '"wght" 700, "XHGT" 0.7');
|
||||
|
||||
test_computed_value('font-variation-settings', '"XHGT" calc(0.4 + 0.3)', '"XHGT" 0.7');
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,27 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Fonts Module Level 4: parsing font-variation-settings with invalid values</title>
|
||||
<link rel="help" href="https://www.w3.org/TR/css-fonts-4/#propdef-font-variation-settings">
|
||||
<meta name="assert" content="font-variation-settings supports only the grammar 'normal | [ <string> <number>] #'.">
|
||||
<meta name="assert" content="font-variation-settings strings must have 4 characters.">
|
||||
<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('font-variation-settings', '700');
|
||||
test_invalid_value('font-variation-settings', '"XHGT"');
|
||||
test_invalid_value('font-variation-settings', 'wght 700');
|
||||
test_invalid_value('font-variation-settings', 'normal, "wght" 700');
|
||||
|
||||
test_invalid_value('font-variation-settings', '"wgt" 700');
|
||||
test_invalid_value('font-variation-settings', '"XHGTX" 0.7');
|
||||
test_invalid_value('font-variation-settings', '"abc\1F" 0.5');
|
||||
test_invalid_value('font-variation-settings', '"abc\7F" 0.5');
|
||||
test_invalid_value('font-variation-settings', '"abc\A9" 0.5');
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,24 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Fonts Module Level 4: parsing font-variation-settings with valid values</title>
|
||||
<link rel="help" href="https://www.w3.org/TR/css-fonts-4/#propdef-font-variation-settings">
|
||||
<meta name="assert" content="font-variation-settings supports the full grammar 'normal | [ <string> <number>] #'.">
|
||||
<meta name="assert" content="font-variation-settings strings are case sensitive.">
|
||||
<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('font-variation-settings', 'normal');
|
||||
|
||||
test_valid_value('font-variation-settings', '"wght" 700');
|
||||
test_valid_value('font-variation-settings', '"wght" 700, "XHGT" 0.7');
|
||||
|
||||
test_valid_value('font-variation-settings', '"a cd" 0.5');
|
||||
test_valid_value('font-variation-settings', '"ab@d" 0.5');
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,26 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Inline Layout: getComputedStyle().dominantBaseline</title>
|
||||
<link rel="help" href="https://drafts.csswg.org/css-inline-3/#dominant-baseline-property">
|
||||
<meta name="assert" content="dominant-baseline 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("dominant-baseline", "auto");
|
||||
test_computed_value("dominant-baseline", "text-bottom");
|
||||
test_computed_value("dominant-baseline", "alphabetic");
|
||||
test_computed_value("dominant-baseline", "ideographic");
|
||||
test_computed_value("dominant-baseline", "middle");
|
||||
test_computed_value("dominant-baseline", "central");
|
||||
test_computed_value("dominant-baseline", "mathematical");
|
||||
test_computed_value("dominant-baseline", "hanging");
|
||||
test_computed_value("dominant-baseline", "text-top");
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,20 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Inline Layout: parsing dominant-baseline with invalid values</title>
|
||||
<link rel="help" href="https://drafts.csswg.org/css-inline-3/#dominant-baseline-property">
|
||||
<meta name="assert" content="dominant-baseline supports only the grammar 'auto | text-bottom | alphabetic | ideographic | middle | central | mathematical | hanging | text-top'.">
|
||||
<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("dominant-baseline", "normal");
|
||||
test_invalid_value("dominant-baseline", "none");
|
||||
test_invalid_value("dominant-baseline", "alphabetic, ideographic");
|
||||
test_invalid_value("dominant-baseline", "middle central");
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,25 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Inline Layout: parsing dominant-baseline with valid values</title>
|
||||
<link rel="help" href="https://drafts.csswg.org/css-inline-3/#dominant-baseline-property">
|
||||
<meta name="assert" content="dominant-baseline supports the full grammar 'auto | text-bottom | alphabetic | ideographic | middle | central | mathematical | hanging | text-top'.">
|
||||
<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("dominant-baseline", "auto");
|
||||
test_valid_value("dominant-baseline", "text-bottom");
|
||||
test_valid_value("dominant-baseline", "alphabetic");
|
||||
test_valid_value("dominant-baseline", "ideographic");
|
||||
test_valid_value("dominant-baseline", "middle");
|
||||
test_valid_value("dominant-baseline", "central");
|
||||
test_valid_value("dominant-baseline", "mathematical");
|
||||
test_valid_value("dominant-baseline", "hanging");
|
||||
test_valid_value("dominant-baseline", "text-top");
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -52,7 +52,7 @@
|
|||
<div class="outer">
|
||||
<div class="blueborders"></div>
|
||||
<div class="innerbg" style="left: 0"></div>
|
||||
<div class="inner lefthalf" style="left: 0; height: 60px">
|
||||
<div class="inner lefthalf" style="left: 0">
|
||||
AAAAA<br>
|
||||
BBBBB<br>
|
||||
CCCCC
|
||||
|
|
|
|||
|
|
@ -5,6 +5,7 @@
|
|||
<link rel="author" title="Mozilla" href="https://mozilla.org/">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-multicol/#column-gaps-and-rules">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-multicol/#cf">
|
||||
<link rel="help" href="https://github.com/w3c/csswg-drafts/issues/2309">
|
||||
<link rel="match" href="multicol-breaking-000-ref.html">
|
||||
<style>
|
||||
|
||||
|
|
|
|||
|
|
@ -67,7 +67,7 @@
|
|||
JJJJJ
|
||||
</div>
|
||||
<div class="innerbg" style="left: 204px"></div>
|
||||
<div class="inner lefthalf" style="left: 204px; height: 80px">
|
||||
<div class="inner lefthalf" style="left: 204px">
|
||||
KKKKK<br>
|
||||
LLLLL<br>
|
||||
MMMMM<br>
|
||||
|
|
|
|||
|
|
@ -5,6 +5,7 @@
|
|||
<link rel="author" title="Mozilla" href="https://mozilla.org/">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-multicol/#column-gaps-and-rules">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-multicol/#cf">
|
||||
<link rel="help" href="https://github.com/w3c/csswg-drafts/issues/2309">
|
||||
<link rel="match" href="multicol-breaking-001-ref.html">
|
||||
<style>
|
||||
|
||||
|
|
|
|||
|
|
@ -77,7 +77,7 @@
|
|||
</div>
|
||||
<div class="border-bottom" style="left: 0"></div>
|
||||
<div class="innerbg" style="left: 204px"></div>
|
||||
<div class="inner lefthalf" style="left: 204px; height: 80px">
|
||||
<div class="inner lefthalf" style="left: 204px">
|
||||
KKKKK<br>
|
||||
LLLLL<br>
|
||||
MMMMM<br>
|
||||
|
|
|
|||
|
|
@ -6,6 +6,7 @@
|
|||
<link rel="author" title="Mozilla" href="https://mozilla.org/">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-multicol/#column-gaps-and-rules">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-multicol/#cf">
|
||||
<link rel="help" href="https://github.com/w3c/csswg-drafts/issues/2309">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-break/#break-decoration">
|
||||
<link rel="match" href="multicol-breaking-004-ref.html">
|
||||
<style>
|
||||
|
|
|
|||
|
|
@ -32,7 +32,7 @@
|
|||
</style>
|
||||
|
||||
<div class="outer">
|
||||
<div class="inner lefthalf" style="left: 0; height: 60px">
|
||||
<div class="inner lefthalf" style="left: 0">
|
||||
AAAAA<br>
|
||||
BBBBB<br>
|
||||
CCCCC
|
||||
|
|
|
|||
|
|
@ -5,6 +5,7 @@
|
|||
<link rel="author" title="Mozilla" href="https://mozilla.org/">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-multicol/#column-gaps-and-rules">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-multicol/#cf">
|
||||
<link rel="help" href="https://github.com/w3c/csswg-drafts/issues/2309">
|
||||
<link rel="match" href="multicol-breaking-nobackground-000-ref.html">
|
||||
<style>
|
||||
|
||||
|
|
|
|||
|
|
@ -46,7 +46,7 @@
|
|||
IIIII<br>
|
||||
JJJJJ
|
||||
</div>
|
||||
<div class="inner lefthalf" style="left: 204px; height: 80px">
|
||||
<div class="inner lefthalf" style="left: 204px">
|
||||
KKKKK<br>
|
||||
LLLLL<br>
|
||||
MMMMM<br>
|
||||
|
|
|
|||
|
|
@ -5,6 +5,7 @@
|
|||
<link rel="author" title="Mozilla" href="https://mozilla.org/">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-multicol/#column-gaps-and-rules">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-multicol/#cf">
|
||||
<link rel="help" href="https://github.com/w3c/csswg-drafts/issues/2309">
|
||||
<link rel="match" href="multicol-breaking-nobackground-001-ref.html">
|
||||
<style>
|
||||
|
||||
|
|
|
|||
|
|
@ -0,0 +1,43 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Multi-column Layout Test Reference: Test the column rules' block-size with nested balancing multicol container</title>
|
||||
<link rel="author" title="Ting-Yu Lin" href="tlin@mozilla.com">
|
||||
<link rel="author" title="Mozilla" href="https://www.mozilla.org/">
|
||||
|
||||
<style>
|
||||
.outer {
|
||||
column-count: 2;
|
||||
column-rule: 6px solid black;
|
||||
column-fill: auto;
|
||||
width: 400px;
|
||||
height: 250px;
|
||||
}
|
||||
.inner {
|
||||
column-count: 2;
|
||||
column-rule: 3px solid gray;
|
||||
column-fill: auto;
|
||||
height: 200px;
|
||||
}
|
||||
.outer-block {
|
||||
background-color: lightgreen;
|
||||
height: 200px;
|
||||
}
|
||||
.inner-block {
|
||||
background-color: lightblue;
|
||||
height: 150px;
|
||||
}
|
||||
.space {
|
||||
height: 50px;
|
||||
}
|
||||
</style>
|
||||
|
||||
<article class="outer">
|
||||
<div class="outer-block"></div>
|
||||
<div class="space"></div>
|
||||
<article class="inner">
|
||||
<div class="inner-block"></div><div class="space"></div>
|
||||
<div class="inner-block"></div><div class="space"></div>
|
||||
</article>
|
||||
</article>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,41 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Multi-column Layout Test: Test the column rules' block-size with nested balancing multicol container</title>
|
||||
<link rel="author" title="Ting-Yu Lin" href="tlin@mozilla.com">
|
||||
<link rel="author" title="Mozilla" href="https://www.mozilla.org/">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-multicol-1/#cf">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-multicol-1/#column-gaps-and-rules">
|
||||
<link rel="help" href="https://github.com/w3c/csswg-drafts/issues/2309">
|
||||
<link rel="match" href="multicol-rule-nested-balancing-001-ref.html">
|
||||
<meta name="assert" content="This test verifies that the column-rules are extended to the content block-end edges of their corresponding inner and outer multicol container.">
|
||||
|
||||
<style>
|
||||
.outer {
|
||||
column-count: 2;
|
||||
column-rule: 6px solid black;
|
||||
width: 400px;
|
||||
height: 250px;
|
||||
}
|
||||
.inner {
|
||||
column-count: 2;
|
||||
column-rule: 3px solid gray;
|
||||
height: 200px;
|
||||
}
|
||||
.outer-block {
|
||||
background-color: lightgreen;
|
||||
height: 200px;
|
||||
}
|
||||
.inner-block {
|
||||
background-color: lightblue;
|
||||
height: 300px;
|
||||
}
|
||||
</style>
|
||||
|
||||
<article class="outer">
|
||||
<div class="outer-block"></div>
|
||||
<article class="inner">
|
||||
<div class="inner-block"></div>
|
||||
</article>
|
||||
</article>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,43 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Multi-column Layout Test Reference: Test the column rules' block-size with nested balancing multicol container</title>
|
||||
<link rel="author" title="Ting-Yu Lin" href="tlin@mozilla.com">
|
||||
<link rel="author" title="Mozilla" href="https://www.mozilla.org/">
|
||||
|
||||
<style>
|
||||
.outer {
|
||||
column-count: 2;
|
||||
column-rule: 6px solid black;
|
||||
column-fill: auto;
|
||||
width: 400px;
|
||||
height: 250px;
|
||||
}
|
||||
.inner {
|
||||
column-count: 2;
|
||||
column-rule: 3px solid gray;
|
||||
column-fill: auto;
|
||||
height: 200px;
|
||||
}
|
||||
.outer-block {
|
||||
background-color: lightgreen;
|
||||
height: 200px;
|
||||
}
|
||||
.inner-block {
|
||||
background-color: lightblue;
|
||||
height: 200px;
|
||||
}
|
||||
.space {
|
||||
height: 50px;
|
||||
}
|
||||
</style>
|
||||
|
||||
<article class="outer">
|
||||
<div class="outer-block"></div>
|
||||
<div class="space"></div>
|
||||
<article class="inner">
|
||||
<div class="inner-block"></div>
|
||||
<div class="inner-block"></div>
|
||||
</article>
|
||||
</article>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,41 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Multi-column Layout Test: Test the column rules' block-size with nested balancing multicol container</title>
|
||||
<link rel="author" title="Ting-Yu Lin" href="tlin@mozilla.com">
|
||||
<link rel="author" title="Mozilla" href="https://www.mozilla.org/">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-multicol-1/#cf">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-multicol-1/#column-gaps-and-rules">
|
||||
<link rel="help" href="https://github.com/w3c/csswg-drafts/issues/2309">
|
||||
<link rel="match" href="multicol-rule-nested-balancing-002-ref.html">
|
||||
<meta name="assert" content="This test verifies that the column-rules are extended to the content block-end edges of their corresponding inner and outer multicol container, where the inner container has height: auto.">
|
||||
|
||||
<style>
|
||||
.outer {
|
||||
column-count: 2;
|
||||
column-rule: 6px solid black;
|
||||
width: 400px;
|
||||
height: 250px;
|
||||
}
|
||||
.inner {
|
||||
column-count: 2;
|
||||
column-rule: 3px solid gray;
|
||||
height: auto;
|
||||
}
|
||||
.outer-block {
|
||||
background-color: lightgreen;
|
||||
height: 200px;
|
||||
}
|
||||
.inner-block {
|
||||
background-color: lightblue;
|
||||
height: 400px;
|
||||
}
|
||||
</style>
|
||||
|
||||
<article class="outer">
|
||||
<div class="outer-block"></div>
|
||||
<article class="inner">
|
||||
<div class="inner-block"></div>
|
||||
</article>
|
||||
</article>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,47 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Multi-column Layout Test Reference: Test the block-size distribution across column-span split in a balancing multicol container</title>
|
||||
<link rel="author" title="Ting-Yu Lin" href="tlin@mozilla.com">
|
||||
<link rel="author" title="Mozilla" href="https://www.mozilla.org/">
|
||||
|
||||
<style>
|
||||
article {
|
||||
column-count: 2;
|
||||
width: 400px;
|
||||
background-color: lightgreen;
|
||||
}
|
||||
div.container {
|
||||
height: 200px;
|
||||
background-color: pink;
|
||||
}
|
||||
div.block {
|
||||
width: 100px;
|
||||
height: 200px;
|
||||
background-color: yellow;
|
||||
}
|
||||
div.column-span {
|
||||
width: 400px;
|
||||
height: 50px;
|
||||
background-color: lightblue;
|
||||
}
|
||||
</style>
|
||||
|
||||
<article>
|
||||
<div class="container">
|
||||
<div class="block">block1</div>
|
||||
</div>
|
||||
</article>
|
||||
<div class="column-span">column-span1</div>
|
||||
<article>
|
||||
<div class="container">
|
||||
<div class="block">block2</div>
|
||||
</div>
|
||||
</article>
|
||||
<div class="column-span">column-span2</div>
|
||||
<article>
|
||||
<div class="container" style="height: 50px;">
|
||||
<div class="block">block3</div>
|
||||
</div>
|
||||
</article>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,51 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Multi-column Layout Test: Test the block-size distribution across column-span split in a balancing multicol container</title>
|
||||
<link rel="author" title="Ting-Yu Lin" href="tlin@mozilla.com">
|
||||
<link rel="author" title="Mozilla" href="https://www.mozilla.org/">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-multicol-1/#column-span">
|
||||
<link rel="match" href="multicol-span-all-children-height-004a-ref.html">
|
||||
<meta name="assert" content="This test verifies that a block container with a fixed block-size, split by column-span, distributes just enough block-size to hold its children.">
|
||||
|
||||
<style>
|
||||
article {
|
||||
column-count: 2;
|
||||
width: 400px;
|
||||
background-color: lightgreen;
|
||||
}
|
||||
div.container {
|
||||
height: 450px;
|
||||
background-color: pink;
|
||||
}
|
||||
div.block {
|
||||
width: 100px;
|
||||
height: 200px;
|
||||
background-color: yellow;
|
||||
}
|
||||
div.column-span {
|
||||
column-span: all;
|
||||
height: 50px;
|
||||
background-color: lightblue;
|
||||
}
|
||||
</style>
|
||||
|
||||
<article>
|
||||
<!-- The container is split by the column-spans.
|
||||
a) Before column-span1, it distributes 200px height into two columns,
|
||||
and each column takes 100px height.
|
||||
b) In between column-span1 and column-span2, same distribution as a).
|
||||
c) After column-span2, it has 50px height left, which goes to the first
|
||||
column.
|
||||
-->
|
||||
<div class="container">
|
||||
<!-- Each block spreads its height evenly into two columns, and
|
||||
each column contains 100px height. -->
|
||||
<div class="block">block1</div>
|
||||
<div class="column-span">column-span1</div>
|
||||
<div class="block">block2</div>
|
||||
<div class="column-span">column-span2</div>
|
||||
<div class="block">block3</div>
|
||||
</div>
|
||||
</article>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,47 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Multi-column Layout Test Reference: Test the block-size distribution across column-span split in a balancing multicol container</title>
|
||||
<link rel="author" title="Ting-Yu Lin" href="tlin@mozilla.com">
|
||||
<link rel="author" title="Mozilla" href="https://www.mozilla.org/">
|
||||
|
||||
<style>
|
||||
article {
|
||||
column-count: 2;
|
||||
width: 400px;
|
||||
background-color: lightgreen;
|
||||
}
|
||||
div.container {
|
||||
height: 200px;
|
||||
background-color: pink;
|
||||
}
|
||||
div.block {
|
||||
width: 100px;
|
||||
height: 200px;
|
||||
background-color: yellow;
|
||||
}
|
||||
div.column-span {
|
||||
width: 400px;
|
||||
height: 50px;
|
||||
background-color: lightblue;
|
||||
}
|
||||
</style>
|
||||
|
||||
<article>
|
||||
<div class="container">
|
||||
<div class="block">block1</div>
|
||||
</div>
|
||||
</article>
|
||||
<div class="column-span">column-span1</div>
|
||||
<article>
|
||||
<div class="container" style="height: 150px;">
|
||||
<div class="block">block2</div>
|
||||
</div>
|
||||
</article>
|
||||
<div class="column-span">column-span2</div>
|
||||
<article>
|
||||
<div class="container" style="height: 0;">
|
||||
<div class="block">block3</div>
|
||||
</div>
|
||||
</article>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,50 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Multi-column Layout Test: Test the block-size distribution across column-span split in a balancing multicol container</title>
|
||||
<link rel="author" title="Ting-Yu Lin" href="tlin@mozilla.com">
|
||||
<link rel="author" title="Mozilla" href="https://www.mozilla.org/">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-multicol-1/#column-span">
|
||||
<link rel="match" href="multicol-span-all-children-height-004b-ref.html">
|
||||
<meta name="assert" content="This test verifies that a block container with a fixed block-size, split by column-span, distributes just enough block-size to hold its children.">
|
||||
|
||||
<style>
|
||||
article {
|
||||
column-count: 2;
|
||||
width: 400px;
|
||||
background-color: lightgreen;
|
||||
}
|
||||
div.container {
|
||||
height: 350px;
|
||||
background-color: pink;
|
||||
}
|
||||
div.block {
|
||||
width: 100px;
|
||||
height: 200px;
|
||||
background-color: yellow;
|
||||
}
|
||||
div.column-span {
|
||||
column-span: all;
|
||||
height: 50px;
|
||||
background-color: lightblue;
|
||||
}
|
||||
</style>
|
||||
|
||||
<article>
|
||||
<!-- The container is split by the column-spans.
|
||||
a) Before column-span1, it distributes 200px height into two columns,
|
||||
and each column takes 100px height.
|
||||
b) In between column-span1 and column-span2, it has 150px left. The first
|
||||
column takes 100px, and the second column takes 50px.
|
||||
-->
|
||||
<div class="container">
|
||||
<!-- Each block spreads its height evenly into two columns, and
|
||||
each column contains 100px height. -->
|
||||
<div class="block">block1</div>
|
||||
<div class="column-span">column-span1</div>
|
||||
<div class="block">block2</div>
|
||||
<div class="column-span">column-span2</div>
|
||||
<div class="block">block3</div>
|
||||
</div>
|
||||
</article>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,46 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Multi-column Layout Test Reference: Test the block-size distribution across column-span split in a column-fill:auto multicol container</title>
|
||||
<link rel="author" title="Ting-Yu Lin" href="tlin@mozilla.com">
|
||||
<link rel="author" title="Mozilla" href="https://www.mozilla.org/">
|
||||
|
||||
<style>
|
||||
article {
|
||||
column-count: 1;
|
||||
width: 200px;
|
||||
background-color: lightgreen;
|
||||
}
|
||||
div.container {
|
||||
background-color: pink;
|
||||
}
|
||||
div.block {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
background-color: yellow;
|
||||
}
|
||||
div.column-span {
|
||||
width: 200px;
|
||||
height: 50px;
|
||||
background-color: lightblue;
|
||||
}
|
||||
</style>
|
||||
|
||||
<article>
|
||||
<div class="container">
|
||||
<div class="block">block1</div>
|
||||
</div>
|
||||
</article>
|
||||
<div class="column-span">column-span1</div>
|
||||
<article>
|
||||
<div class="container">
|
||||
<div class="block">block2</div>
|
||||
</div>
|
||||
</article>
|
||||
<div class="column-span">column-span2</div>
|
||||
<article>
|
||||
<div class="container" style="height: 50px;">
|
||||
<div class="block">block3</div>
|
||||
</div>
|
||||
</article>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,48 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Multi-column Layout Test: Test the block-size distribution across column-span split in a column-fill:auto multicol container</title>
|
||||
<link rel="author" title="Ting-Yu Lin" href="tlin@mozilla.com">
|
||||
<link rel="author" title="Mozilla" href="https://www.mozilla.org/">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-multicol-1/#column-span">
|
||||
<link rel="match" href="multicol-span-all-children-height-005-ref.html">
|
||||
<meta name="assert" content="This test verifies that a block container with a fixed block-size, split by column-span, distributes just enough block-size to hold its children.">
|
||||
|
||||
<style>
|
||||
article {
|
||||
column-count: 1;
|
||||
column-fill: auto;
|
||||
width: 200px;
|
||||
background-color: lightgreen;
|
||||
}
|
||||
div.container {
|
||||
height: 250px;
|
||||
background-color: pink;
|
||||
}
|
||||
div.block {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
background-color: yellow;
|
||||
}
|
||||
div.column-span {
|
||||
column-span: all;
|
||||
height: 50px;
|
||||
background-color: lightblue;
|
||||
}
|
||||
</style>
|
||||
|
||||
<article>
|
||||
<!-- The container is split by the column-spans.
|
||||
a) Before column-span1, it distributes 100px height into the sole column.
|
||||
b) In between column-span1 and column-span2, same distribution as a).
|
||||
c) After column-span2, it has 50px height left.
|
||||
-->
|
||||
<div class="container">
|
||||
<div class="block">block1</div>
|
||||
<div class="column-span">column-span1</div>
|
||||
<div class="block">block2</div>
|
||||
<div class="column-span">column-span2</div>
|
||||
<div class="block">block3</div>
|
||||
</div>
|
||||
</article>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,42 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Multi-column Layout Test Reference: Test the borders drawing for a block split by column-span</title>
|
||||
<link rel="author" title="Ting-Yu Lin" href="tlin@mozilla.com">
|
||||
<link rel="author" title="Mozilla" href="https://www.mozilla.org/">
|
||||
|
||||
<style>
|
||||
article {
|
||||
column-count: 2;
|
||||
width: 400px;
|
||||
background-color: lightgreen;
|
||||
}
|
||||
div.container {
|
||||
background-color: pink;
|
||||
border: 20px solid purple;
|
||||
}
|
||||
div.block {
|
||||
/* This block spreads evenly into two columns, each has 100px height. */
|
||||
width: 100px;
|
||||
height: 200px;
|
||||
background-color: yellow;
|
||||
}
|
||||
div.column-span {
|
||||
width: 400px;
|
||||
height: 50px;
|
||||
background-color: lightblue;
|
||||
}
|
||||
</style>
|
||||
|
||||
<article>
|
||||
<div class="container" style="border-bottom: none; height: 200px;">
|
||||
<div class="block">block1</div>
|
||||
</div>
|
||||
</article>
|
||||
<div class="column-span">column-span1</div>
|
||||
<article>
|
||||
<div class="container" style="border-top: none; height: 50px;">
|
||||
<div class="block">block2</div>
|
||||
</div>
|
||||
</article>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,41 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Multi-column Layout Test: Test the borders drawing for a block split by column-span</title>
|
||||
<link rel="author" title="Ting-Yu Lin" href="tlin@mozilla.com">
|
||||
<link rel="author" title="Mozilla" href="https://www.mozilla.org/">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-multicol-1/#column-span">
|
||||
<link rel="match" href="multicol-span-all-children-height-006-ref.html">
|
||||
<meta name="assert" content="This test verifies that the borders of block container with a fixed block-size, split by column-span, are skipped on the sides adjacent to column-span.">
|
||||
|
||||
<style>
|
||||
article {
|
||||
column-count: 2;
|
||||
width: 400px;
|
||||
background-color: lightgreen;
|
||||
}
|
||||
div.container {
|
||||
height: 250px;
|
||||
background-color: pink;
|
||||
border: 20px solid purple;
|
||||
}
|
||||
div.block {
|
||||
width: 100px;
|
||||
height: 200px;
|
||||
background-color: yellow;
|
||||
}
|
||||
div.column-span {
|
||||
column-span: all;
|
||||
height: 50px;
|
||||
background-color: lightblue;
|
||||
}
|
||||
</style>
|
||||
|
||||
<article>
|
||||
<div class="container">
|
||||
<div class="block">block1</div>
|
||||
<div class="column-span">column-span1</div>
|
||||
<div class="block">block2</div>
|
||||
</div>
|
||||
</article>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,36 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Multi-column Layout Test: Test the column-rule's block-size</title>
|
||||
<link rel="author" title="Ting-Yu Lin" href="tlin@mozilla.com">
|
||||
<link rel="author" title="Mozilla" href="https://www.mozilla.org/">
|
||||
|
||||
<style>
|
||||
article {
|
||||
column-count: 2;
|
||||
column-rule: 6px solid;
|
||||
width: 400px;
|
||||
height: 500px;
|
||||
background-color: lightgreen;
|
||||
border: 2em solid purple;
|
||||
padding: 2em;
|
||||
}
|
||||
div.block {
|
||||
width: 100px;
|
||||
height: 200px;
|
||||
}
|
||||
div.column-span {
|
||||
column-span: all;
|
||||
height: 50px;
|
||||
background-color: lightblue;
|
||||
}
|
||||
</style>
|
||||
|
||||
<article>
|
||||
<div class="block">block1</div>
|
||||
<div class="column-span">column-span1</div>
|
||||
<div class="block">block2</div>
|
||||
<div class="column-span">column-span2</div>
|
||||
<div class="block" style="height: 400px;">block3</div>
|
||||
</article>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,45 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Multi-column Layout Test: Test the column rule's block-size</title>
|
||||
<link rel="author" title="Ting-Yu Lin" href="tlin@mozilla.com">
|
||||
<link rel="author" title="Mozilla" href="https://www.mozilla.org/">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-multicol-1/#column-span">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-multicol-1/#column-gaps-and-rules">
|
||||
<link rel="help" href="https://github.com/w3c/csswg-drafts/issues/2309">
|
||||
<link rel="match" href="multicol-span-all-rule-001-ref.html">
|
||||
<meta name="assert" content="This test verifies that the column-rule after the last column-span is extended to the content block-end edge of the multicol container.">
|
||||
|
||||
<style>
|
||||
article {
|
||||
column-count: 2;
|
||||
column-rule: 6px solid;
|
||||
width: 400px;
|
||||
height: 500px;
|
||||
background-color: lightgreen;
|
||||
border: 2em solid purple;
|
||||
padding: 2em;
|
||||
}
|
||||
div.block {
|
||||
width: 100px;
|
||||
height: 200px;
|
||||
}
|
||||
div.column-span {
|
||||
column-span: all;
|
||||
height: 50px;
|
||||
background-color: lightblue;
|
||||
}
|
||||
</style>
|
||||
|
||||
<article>
|
||||
<!-- Each block spreads its height evenly into two columns, and
|
||||
each column contains 100px height. -->
|
||||
<div class="block">block1</div>
|
||||
<div class="column-span">column-span1</div>
|
||||
<div class="block">block2</div>
|
||||
<div class="column-span">column-span2</div>
|
||||
<!-- The column rule after column-span2 should extend to the content edge
|
||||
of the multicol container as if block3 has "height: 400px;" -->
|
||||
<div class="block">block3</div>
|
||||
</article>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,12 @@
|
|||
<!DOCTYPE html>
|
||||
<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org">
|
||||
<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=919415">
|
||||
<div id="target" style="position:absolute; overflow:auto; height:100px; top:100px;"></div>
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<script>
|
||||
test(()=> {
|
||||
document.body.offsetTop;
|
||||
target.style.top = "50px";
|
||||
}, "no crash");
|
||||
</script>
|
||||
|
|
@ -15,6 +15,8 @@
|
|||
<div id="target"></div>
|
||||
</div>
|
||||
<script>
|
||||
assert_not_inherited('overscroll-behavior-block', 'auto', 'contain');
|
||||
assert_not_inherited('overscroll-behavior-inline', 'auto', 'contain');
|
||||
assert_not_inherited('overscroll-behavior-x', 'auto', 'contain');
|
||||
assert_not_inherited('overscroll-behavior-y', 'auto', 'contain');
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,22 @@
|
|||
<!doctype html>
|
||||
<title>CSS Test: ::before box removed when display set to 'none'.</title>
|
||||
<link rel="help" href="https://drafts.csswg.org/css-pseudo-4/#generated-content">
|
||||
<link rel="match" href="../reference/pass_if_pass_below.html">
|
||||
<style>
|
||||
#id::before {
|
||||
content: "FAIL";
|
||||
position: absolute;
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
background-color: red;
|
||||
}
|
||||
#id.none::before {
|
||||
display: none;
|
||||
}
|
||||
</style>
|
||||
<p>Test passes if there is the word "PASS" below.</p>
|
||||
<div id="id" class="open">PASS</div>
|
||||
<script>
|
||||
id.offsetTop;
|
||||
id.className = "none";
|
||||
</script>
|
||||
|
|
@ -16,7 +16,7 @@
|
|||
background: green;
|
||||
font-family: monospace;
|
||||
width: 1ch;
|
||||
height: 20em;
|
||||
height: 19em;
|
||||
}
|
||||
#test {
|
||||
width: 1ch;
|
||||
|
|
@ -25,9 +25,12 @@
|
|||
font-family: monospace;
|
||||
line-break: anywhere;
|
||||
}
|
||||
span {
|
||||
background: red;
|
||||
}
|
||||
</style>
|
||||
|
||||
<p>Test passes if there is a green rectangle below and no red.</p>
|
||||
<div id=green></div>
|
||||
<!-- with line breaks everywhere, none of the following characters should stick out from under the green div -->
|
||||
<div id=test>aa-a.a)a,a）a aa⁠a‍a･a</div>
|
||||
<div id=test>aa-a.a)a,a）a<span> </span>aa⁠a‍a･a</div>
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
<!DOCTYPE html>
|
||||
<!DOCTYPE html>
|
||||
<html lang=en>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Text Test Reference</title>
|
||||
|
|
@ -9,7 +9,7 @@
|
|||
background: green;
|
||||
font-family: monospace;
|
||||
width: 1ch;
|
||||
height: 20em;
|
||||
height: 19em;
|
||||
}
|
||||
</style>
|
||||
|
||||
|
|
|
|||
|
|
@ -0,0 +1,18 @@
|
|||
<!DOCTYPE html>
|
||||
<title>CSS Text Test: Chrome pre-line crash test</title>
|
||||
<link rel="help" href="https://crbug.com/989827">
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<style>
|
||||
br { white-space: pre-line }
|
||||
</style>
|
||||
<script>
|
||||
test(() => {
|
||||
document.documentElement.remove();
|
||||
const br = document.createElement("br");
|
||||
br.appendChild(document.createTextNode(""));
|
||||
document.appendChild(br);
|
||||
br.offsetTop;
|
||||
br.firstChild.data = " ";
|
||||
}, "Modifying data of a text child of a root br element with pre-line should not crash.");
|
||||
</script>
|
||||
|
|
@ -0,0 +1,19 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>CSSOM View: getComputedStyle().scrollBehavior</title>
|
||||
<link rel="help" href="https://drafts.csswg.org/cssom-view/#propdef-scroll-behavior">
|
||||
<meta name="assert" content="scroll-behavior 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("scroll-behavior", 'auto');
|
||||
test_computed_value("scroll-behavior", 'smooth');
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,19 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>CSSOM View: parsing scroll-behavior with invalid values</title>
|
||||
<link rel="help" href="https://drafts.csswg.org/cssom-view/#propdef-scroll-behavior">
|
||||
<meta name="assert" content="scroll-behavior supports only the grammar 'auto | smooth'.">
|
||||
<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("scroll-behavior", 'normal');
|
||||
test_invalid_value("scroll-behavior", 'auto smooth');
|
||||
test_invalid_value("scroll-behavior", 'auto, smooth');
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,18 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>CSSOM View: parsing scroll-behavior with valid values</title>
|
||||
<link rel="help" href="https://drafts.csswg.org/cssom-view/#propdef-scroll-behavior">
|
||||
<meta name="assert" content="scroll-behavior supports the full grammar 'auto | smooth'.">
|
||||
<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("scroll-behavior", 'auto');
|
||||
test_valid_value("scroll-behavior", 'smooth');
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -42,7 +42,7 @@
|
|||
to: 'right -140% bottom -60%',
|
||||
}, [
|
||||
{at: -1, expect: 'calc(960px - 240%) calc(800px - 160%)'},
|
||||
{at: 0, expect: 'left 480px top 400px'},
|
||||
{at: 0, expect: 'left calc(0% + 480px) top calc(0% + 400px)'},
|
||||
{at: 0.125, expect: 'calc(420px + 30%) calc(350px + 20%)'},
|
||||
{at: 0.875, expect: 'calc(210% + 60px) calc(140% + 50px)'},
|
||||
{at: 1, expect: 'right -140% bottom -60%'},
|
||||
|
|
@ -54,12 +54,12 @@
|
|||
from: 'left top',
|
||||
to: 'left 8px bottom 20%',
|
||||
}, [
|
||||
{at: -1, expect: '-8px -80%'},
|
||||
{at: -1, expect: 'calc(0% - 8px) -80%'},
|
||||
{at: 0, expect: 'left top'},
|
||||
{at: 0.125, expect: '1px 10%'},
|
||||
{at: 0.875, expect: '7px 70%'},
|
||||
{at: 1, expect: 'left 8px bottom 20%'},
|
||||
{at: 2, expect: '16px 160%'}
|
||||
{at: 0.125, expect: 'calc(0% + 1px) 10%'},
|
||||
{at: 0.875, expect: 'calc(0% + 7px) 70%'},
|
||||
{at: 1, expect: 'left calc(0% + 8px) bottom 20%'},
|
||||
{at: 2, expect: 'calc(0% + 16px) 160%'}
|
||||
]);
|
||||
|
||||
test_no_interpolation({
|
||||
|
|
|
|||
|
|
@ -0,0 +1,35 @@
|
|||
<!DOCTYPE html>
|
||||
<html class="reftest-wait">
|
||||
<head>
|
||||
<title>CSS Motion Path: Combined transformation matrix interpolation</title>
|
||||
<link rel="help" href="https://drafts.csswg.org/css-transforms-2/#ctm">
|
||||
<link rel="match" href="offset-path-with-transforms-ref.html">
|
||||
<meta name="assert" content="This tests animating combined transformation matrix.">
|
||||
<style>
|
||||
@keyframes anim {
|
||||
to {
|
||||
translate: 0px 100px;
|
||||
offset-distance: 100%;
|
||||
transform: translateX(-100px);
|
||||
}
|
||||
}
|
||||
#target {
|
||||
position: absolute;
|
||||
width: 100px;
|
||||
height: 50px;
|
||||
background-color: lime;
|
||||
offset-path: path("M25 0v100");
|
||||
animation: anim 10s -5s paused linear;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body onload="load()">
|
||||
<div id="target"></div>
|
||||
<div style='width: 50px; height: 100px; background-color: red;'></div>
|
||||
</body>
|
||||
<script>
|
||||
requestAnimationFrame(() => {
|
||||
document.documentElement.classList.remove('reftest-wait');
|
||||
});
|
||||
</script>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,16 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>CSS Motion Path: Combined transformation matrix interpolation reference</title>
|
||||
<style>
|
||||
#target {
|
||||
width: 50px;
|
||||
height: 100px;
|
||||
background-color: lime;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div id="target"></div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -22,7 +22,7 @@
|
|||
|
||||
test(function(){
|
||||
target.style = 'offset-position: calc(30px + 20%) calc(-200px + 8em + 100%);';
|
||||
assert_equals(getComputedStyle(target).offsetPosition, 'calc(20% + 30px) calc(100% + -40px)');
|
||||
assert_equals(getComputedStyle(target).offsetPosition, 'calc(20% + 30px) calc(100% - 40px)');
|
||||
}, 'offset-position supports calc');
|
||||
|
||||
test(function(){
|
||||
|
|
@ -32,7 +32,7 @@ test(function(){
|
|||
|
||||
test(function(){
|
||||
target.style = 'offset-distance: calc(-100px + 50%);';
|
||||
assert_equals(getComputedStyle(target).offsetDistance, 'calc(50% + -100px)');
|
||||
assert_equals(getComputedStyle(target).offsetDistance, 'calc(50% - 100px)');
|
||||
}, 'offset-distance supports calc');
|
||||
|
||||
test(function(){
|
||||
|
|
@ -42,7 +42,7 @@ test(function(){
|
|||
|
||||
test(function(){
|
||||
target.style = 'offset-anchor: calc(30px + 20%) calc(-200px + 8em + 100%);';
|
||||
assert_equals(getComputedStyle(target).offsetAnchor, 'calc(20% + 30px) calc(100% + -40px)');
|
||||
assert_equals(getComputedStyle(target).offsetAnchor, 'calc(20% + 30px) calc(100% - 40px)');
|
||||
}, 'offset-anchor supports calc');
|
||||
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -19,7 +19,7 @@ test_valid_value("offset-anchor", "center center");
|
|||
test_valid_value("offset-anchor", "right center");
|
||||
test_valid_value("offset-anchor", "center top");
|
||||
test_valid_value("offset-anchor", "center bottom");
|
||||
test_valid_value("offset-anchor", "calc(10px + 20%) center");
|
||||
test_valid_value("offset-anchor", "calc(20% + 10px) center");
|
||||
test_valid_value("offset-anchor", "right 30em");
|
||||
test_valid_value("offset-anchor", "10px 20%");
|
||||
test_valid_value("offset-anchor", "left -10px top -20%");
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue