mirror of
https://github.com/servo/servo.git
synced 2025-08-12 17:05:33 +01:00
Update web-platform-tests to revision 78f764c05c229883e87ad135c7153051a66e2851
This commit is contained in:
WPT Sync Bot
parent
55347aa39f
commit
bf84a079f9
1983 changed files with 58006 additions and 31437 deletions
|
|
@ -38,7 +38,7 @@
|
|||
span
|
||||
{
|
||||
background-color: yellow;
|
||||
font-size: large;
|
||||
font-size: larger;
|
||||
}
|
||||
</style>
|
||||
|
||||
|
|
|
|||
|
|
@ -374,12 +374,12 @@ test(t => {
|
|||
assert_equals(animations[1].effect.target.type, '::before',
|
||||
'The animation targeting the ::before pseudo-element ' +
|
||||
'should be returned second');
|
||||
assert_equals(animations[1].effect.target.parentElement, parent,
|
||||
assert_equals(animations[1].effect.target.element, parent,
|
||||
'This ::before element should be child of parent element');
|
||||
assert_equals(animations[2].effect.target.type, '::after',
|
||||
'The animation targeting the ::after pesudo-element ' +
|
||||
'should be returned third');
|
||||
assert_equals(animations[2].effect.target.parentElement, parent,
|
||||
assert_equals(animations[2].effect.target.element, parent,
|
||||
'This ::after element should be child of parent element');
|
||||
|
||||
assert_equals(animations[3].effect.target, child,
|
||||
|
|
@ -388,12 +388,12 @@ test(t => {
|
|||
assert_equals(animations[4].effect.target.type, '::before',
|
||||
'The animation targeting the ::before pseudo-element ' +
|
||||
'should be returned fifth');
|
||||
assert_equals(animations[4].effect.target.parentElement, child,
|
||||
assert_equals(animations[4].effect.target.element, child,
|
||||
'This ::before element should be child of child element');
|
||||
assert_equals(animations[5].effect.target.type, '::after',
|
||||
'The animation targeting the ::after pesudo-element ' +
|
||||
'should be returned last');
|
||||
assert_equals(animations[5].effect.target.parentElement, child,
|
||||
assert_equals(animations[5].effect.target.element, child,
|
||||
'This ::after element should be child of child element');
|
||||
}, '{ subtree: true } on an element with a child returns animations from the'
|
||||
+ ' element, its pseudo-elements, its child and its child pseudo-elements');
|
||||
|
|
|
|||
|
|
@ -0,0 +1,31 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Flexbox Test: Indefinite % flex-basis should cause height to be ignored</title>
|
||||
<link rel="author" title="Google LLC" href="https://www.google.com">
|
||||
<link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#flex-basis-property">
|
||||
<link rel="match" href="../reference/ref-filled-green-100px-square.xht">
|
||||
<style>
|
||||
#container {
|
||||
background-color: red;
|
||||
display: flex;
|
||||
width: 100px;
|
||||
flex-direction: column;
|
||||
}
|
||||
#item {
|
||||
flex: 0 0 0%;
|
||||
height: 500px;
|
||||
background-color: red;
|
||||
}
|
||||
#child {
|
||||
height: 100px;
|
||||
background-color: green;
|
||||
}
|
||||
</style>
|
||||
<body>
|
||||
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
|
||||
<div id="container">
|
||||
<div id="item">
|
||||
<div id="child"></div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
|
|
@ -0,0 +1,49 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<title>CSS Flexbox: min-height: auto with nested flexboxes</title>
|
||||
<link rel="author" title="Google LLC" href="https://www.google.com/" />
|
||||
<link rel="help" href="https://drafts.csswg.org/css-flexbox/#min-size-auto" />
|
||||
<link rel="issue" href="https://bugs.chromium.org/p/chromium/issues/detail?id=933931" />
|
||||
<link rel="match" href="../reference/ref-filled-green-100px-square.xht" />
|
||||
|
||||
<style>
|
||||
.outer {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 20px;
|
||||
width: 100px;
|
||||
background: red;
|
||||
}
|
||||
|
||||
.middle {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
background: green;
|
||||
}
|
||||
|
||||
.inner {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.tall {
|
||||
width: 50px;
|
||||
height: 100px;
|
||||
background: green;
|
||||
}
|
||||
</style>
|
||||
<body>
|
||||
|
||||
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
|
||||
|
||||
<div class="outer">
|
||||
<div class="middle">
|
||||
<div class="inner">
|
||||
<div class="tall"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,23 @@
|
|||
<!DOCTYPE html>
|
||||
<link rel="author" title="Google LLC" href="http://www.google.com" />
|
||||
<link rel="help" href="https://drafts.csswg.org/css-flexbox/#cross-sizing" />
|
||||
<title>css-flexbox: Tests that we size items in a wrapping column flexbox as fit-content</title>
|
||||
<link rel="match" href="../reference/ref-filled-green-100px-square.xht" />
|
||||
<meta name="assert" content="The flexbox here should have one flex line, 100px by 100px. The flex items overflow but are transparent." />
|
||||
|
||||
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
|
||||
|
||||
<!-- This makes sure that we only see green if the flex items are sized correctly -->
|
||||
<div style="position: absolute; width: 100px; height: 100px; background: green;"></div>
|
||||
|
||||
<div style="display: flex; flex-direction: column; flex-wrap: wrap; width: 200px; height: 100px; line-height: 20px; align-content: flex-start;">
|
||||
<div style="background-color: red; height: 100px; max-width: 50%; align-self: center;">
|
||||
<!-- These zero-height divs give the flex item a min-content width of
|
||||
50px and a max-content width of 250px -->
|
||||
<div style="width: 50px; display: inline-block;"></div>
|
||||
<div style="width: 50px; display: inline-block;"></div>
|
||||
<div style="width: 50px; display: inline-block;"></div>
|
||||
<div style="width: 50px; display: inline-block;"></div>
|
||||
<div style="width: 50px; display: inline-block;"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -1,9 +0,0 @@
|
|||
<title>In quirks mode a flex item should resolve its percentage height against its first ancestor with a defined height.</title>
|
||||
<link rel="help" href="https://quirks.spec.whatwg.org/#the-percentage-height-calculation-quirk">
|
||||
<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="width: 200px; height: 200px;">
|
||||
<div style="display: flex;">
|
||||
<div style="width: 50%; height: 50%; background: green;"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -0,0 +1,17 @@
|
|||
<!-- quirks mode -->
|
||||
<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org">
|
||||
<link rel="help" href="https://www.w3.org/TR/CSS22/visudet.html#the-height-property">
|
||||
<meta name="assert" content="The percentage height resolution quirk isn't applied to flexboxes.">
|
||||
<p>There should be a green square to the left of a blue square, and no red.</p>
|
||||
<div id="container" style="width:200px; height:456px;">
|
||||
<div style="display:flex; background:blue;" data-expected-height="100">
|
||||
<img style="width:100px; height: 50%;" src="support/1x1-green.png" data-expected-height="100">
|
||||
<div style="width: 50px; height: 100%; background: red;" data-expected-height="0"></div>
|
||||
</div>
|
||||
</div>
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<script src="/resources/check-layout-th.js"></script>
|
||||
<script>
|
||||
checkLayout("#container");
|
||||
</script>
|
||||
|
|
@ -0,0 +1,23 @@
|
|||
|
||||
<!doctype html>
|
||||
<title>Testing font-style angle's unit type consideration</title>
|
||||
<link rel="help" href="https://www.w3.org/TR/css-fonts-4/#font-style-prop" />
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<style>
|
||||
|
||||
body {
|
||||
font-style: oblique 0.785398165rad;
|
||||
}
|
||||
|
||||
</style>
|
||||
<script>
|
||||
var test_description = "font-style angle's unit type must be considered";
|
||||
promise_test(
|
||||
t => {
|
||||
return new Promise(test => addEventListener('load', () => test()))
|
||||
.then(test => assert_equals(getComputedStyle(document.querySelector("body"))['font-style'], "oblique 45deg", "Invalid gCS($(\"body\"))['font-style'];"))
|
||||
},
|
||||
test_description
|
||||
);
|
||||
</script>
|
||||
|
|
@ -0,0 +1,96 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Grid Layout Test: minimum contribution with baseline-alignment shim</title>
|
||||
<link rel="author" title="Oriol Brufau" href="mailto:obrufau@igalia.com">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-grid/#algo-content" title="11.5. Resolve Intrinsic Track Sizes">
|
||||
<meta name="assert" content="Checks that the minimum contribution takes the baseline-alignment shim into account when calculating the outer size that grid items would have if their preferred size were their minimum size. Also checks that the shim is used again when clamping the automatic minimum size to less than or equal to the stretch fit into the grid area.">
|
||||
<style>
|
||||
.grid {
|
||||
display: grid;
|
||||
position: relative;
|
||||
font-size: 0;
|
||||
height: 0;
|
||||
width: 0;
|
||||
margin-bottom: 125px;
|
||||
grid-template-rows: 50px 50px;
|
||||
justify-items: baseline;
|
||||
}
|
||||
.item1, .item2 {
|
||||
writing-mode: vertical-lr;
|
||||
}
|
||||
.item1 {
|
||||
padding-left: 25px;
|
||||
background: yellow;
|
||||
}
|
||||
.item2 {
|
||||
padding-right: 25px;
|
||||
background: magenta;
|
||||
}
|
||||
.item1::before, .item2::before {
|
||||
content: '';
|
||||
display: inline-block;
|
||||
width: 25px;
|
||||
height: 25px;
|
||||
vertical-align: top;
|
||||
}
|
||||
.item2::before {
|
||||
vertical-align: bottom;
|
||||
}
|
||||
.area {
|
||||
position: absolute;
|
||||
z-index: -1;
|
||||
left: 0;
|
||||
right: 0;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
grid-column: 1 / 2;
|
||||
grid-row: 1 / 3;
|
||||
background: cyan;
|
||||
}
|
||||
</style>
|
||||
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<script src="/resources/check-layout-th.js"></script>
|
||||
|
||||
<div id="log"></div>
|
||||
|
||||
<div class="grid" style="grid-template-columns: minmax(auto, 0px);">
|
||||
<div class="item1" data-offset-x="0" data-offset-y="0"></div>
|
||||
<div class="item2" data-offset-x="50" data-offset-y="50"></div>
|
||||
<div class="area" data-expected-width="75" data-expected-height="100"></div>
|
||||
</div>
|
||||
|
||||
<div class="grid" style="grid-template-columns: minmax(auto, 75px);">
|
||||
<div class="item1" data-offset-x="0" data-offset-y="0"></div>
|
||||
<div class="item2" data-offset-x="50" data-offset-y="50"></div>
|
||||
<div class="area" data-expected-width="75" data-expected-height="100"></div>
|
||||
</div>
|
||||
|
||||
<div class="grid" style="grid-template-columns: minmax(auto, 88px);">
|
||||
<div class="item1" data-offset-x="0" data-offset-y="0"></div>
|
||||
<div class="item2" data-offset-x="50" data-offset-y="50"></div>
|
||||
<div class="area" data-expected-width="88" data-expected-height="100"></div>
|
||||
</div>
|
||||
|
||||
<div class="grid" style="grid-template-columns: minmax(auto, 100px);">
|
||||
<div class="item1" data-offset-x="0" data-offset-y="0"></div>
|
||||
<div class="item2" data-offset-x="50" data-offset-y="50"></div>
|
||||
<div class="area" data-expected-width="100" data-expected-height="100"></div>
|
||||
</div>
|
||||
|
||||
<div class="grid" style="grid-template-columns: minmax(auto, 150px);">
|
||||
<div class="item1" data-offset-x="0" data-offset-y="0"></div>
|
||||
<div class="item2" data-offset-x="50" data-offset-y="50"></div>
|
||||
<div class="area" data-expected-width="100" data-expected-height="100"></div>
|
||||
</div>
|
||||
|
||||
<div class="grid" style="grid-template-columns: minmax(auto, auto);">
|
||||
<div class="item1" data-offset-x="0" data-offset-y="0"></div>
|
||||
<div class="item2" data-offset-x="50" data-offset-y="50"></div>
|
||||
<div class="area" data-expected-width="100" data-expected-height="100"></div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
checkLayout(".grid");
|
||||
</script>
|
||||
|
|
@ -0,0 +1,96 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Grid Layout Test: minimum contribution with baseline-alignment shim</title>
|
||||
<link rel="author" title="Oriol Brufau" href="mailto:obrufau@igalia.com">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-grid/#algo-content" title="11.5. Resolve Intrinsic Track Sizes">
|
||||
<meta name="assert" content="Checks that the minimum contribution takes the baseline-alignment shim into account when calculating the outer size that grid items would have if their preferred size were their minimum size. Also checks that the shim is used again when clamping the automatic minimum size to less than or equal to the stretch fit into the grid area.">
|
||||
<style>
|
||||
.grid {
|
||||
display: grid;
|
||||
position: relative;
|
||||
font-size: 0;
|
||||
height: 0;
|
||||
width: 0;
|
||||
margin-bottom: 125px;
|
||||
grid-template-rows: 50px 50px;
|
||||
justify-items: baseline;
|
||||
}
|
||||
.item1, .item2 {
|
||||
writing-mode: vertical-rl;
|
||||
}
|
||||
.item1 {
|
||||
padding-left: 25px;
|
||||
background: yellow;
|
||||
}
|
||||
.item2 {
|
||||
padding-right: 25px;
|
||||
background: magenta;
|
||||
}
|
||||
.item1::before, .item2::before {
|
||||
content: '';
|
||||
display: inline-block;
|
||||
width: 25px;
|
||||
height: 25px;
|
||||
vertical-align: top;
|
||||
}
|
||||
.item2::before {
|
||||
vertical-align: bottom;
|
||||
}
|
||||
.area {
|
||||
position: absolute;
|
||||
z-index: -1;
|
||||
left: 0;
|
||||
right: 0;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
grid-column: 1 / 2;
|
||||
grid-row: 1 / 3;
|
||||
background: cyan;
|
||||
}
|
||||
</style>
|
||||
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<script src="/resources/check-layout-th.js"></script>
|
||||
|
||||
<div id="log"></div>
|
||||
|
||||
<div class="grid" style="grid-template-columns: minmax(auto, 0px);">
|
||||
<div class="item1" data-offset-x="0" data-offset-y="0"></div>
|
||||
<div class="item2" data-offset-x="50" data-offset-y="50"></div>
|
||||
<div class="area" data-expected-width="75" data-expected-height="100"></div>
|
||||
</div>
|
||||
|
||||
<div class="grid" style="grid-template-columns: minmax(auto, 75px);">
|
||||
<div class="item1" data-offset-x="0" data-offset-y="0"></div>
|
||||
<div class="item2" data-offset-x="50" data-offset-y="50"></div>
|
||||
<div class="area" data-expected-width="75" data-expected-height="100"></div>
|
||||
</div>
|
||||
|
||||
<div class="grid" style="grid-template-columns: minmax(auto, 88px);">
|
||||
<div class="item1" data-offset-x="0" data-offset-y="0"></div>
|
||||
<div class="item2" data-offset-x="50" data-offset-y="50"></div>
|
||||
<div class="area" data-expected-width="88" data-expected-height="100"></div>
|
||||
</div>
|
||||
|
||||
<div class="grid" style="grid-template-columns: minmax(auto, 100px);">
|
||||
<div class="item1" data-offset-x="0" data-offset-y="0"></div>
|
||||
<div class="item2" data-offset-x="50" data-offset-y="50"></div>
|
||||
<div class="area" data-expected-width="100" data-expected-height="100"></div>
|
||||
</div>
|
||||
|
||||
<div class="grid" style="grid-template-columns: minmax(auto, 150px);">
|
||||
<div class="item1" data-offset-x="0" data-offset-y="0"></div>
|
||||
<div class="item2" data-offset-x="50" data-offset-y="50"></div>
|
||||
<div class="area" data-expected-width="100" data-expected-height="100"></div>
|
||||
</div>
|
||||
|
||||
<div class="grid" style="grid-template-columns: minmax(auto, auto);">
|
||||
<div class="item1" data-offset-x="0" data-offset-y="0"></div>
|
||||
<div class="item2" data-offset-x="50" data-offset-y="50"></div>
|
||||
<div class="area" data-expected-width="100" data-expected-height="100"></div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
checkLayout(".grid");
|
||||
</script>
|
||||
|
|
@ -0,0 +1,93 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Grid Layout Test: minimum contribution with baseline-alignment shim</title>
|
||||
<link rel="author" title="Oriol Brufau" href="mailto:obrufau@igalia.com">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-grid/#algo-content" title="11.5. Resolve Intrinsic Track Sizes">
|
||||
<meta name="assert" content="Checks that the minimum contribution takes the baseline-alignment shim into account when calculating the outer size that grid items would have if their preferred size were their minimum size. Also checks that the shim is used again when clamping the automatic minimum size to less than or equal to the stretch fit into the grid area.">
|
||||
<style>
|
||||
.grid {
|
||||
display: grid;
|
||||
position: relative;
|
||||
font-size: 0;
|
||||
height: 0;
|
||||
width: 0;
|
||||
margin-bottom: 125px;
|
||||
grid-template-columns: 50px 50px;
|
||||
align-items: baseline;
|
||||
}
|
||||
.item1 {
|
||||
padding-top: 25px;
|
||||
background: yellow;
|
||||
}
|
||||
.item2 {
|
||||
padding-bottom: 25px;
|
||||
background: magenta;
|
||||
}
|
||||
.item1::before, .item2::before {
|
||||
content: '';
|
||||
display: inline-block;
|
||||
width: 25px;
|
||||
height: 25px;
|
||||
vertical-align: bottom;
|
||||
}
|
||||
.item2::before {
|
||||
vertical-align: top;
|
||||
}
|
||||
.area {
|
||||
position: absolute;
|
||||
z-index: -1;
|
||||
left: 0;
|
||||
right: 0;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
grid-column: 1 / 3;
|
||||
grid-row: 1 / 2;
|
||||
background: cyan;
|
||||
}
|
||||
</style>
|
||||
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<script src="/resources/check-layout-th.js"></script>
|
||||
|
||||
<div id="log"></div>
|
||||
|
||||
<div class="grid" style="grid-template-rows: minmax(auto, 0px);">
|
||||
<div class="item1" data-offset-x="0" data-offset-y="0"></div>
|
||||
<div class="item2" data-offset-x="50" data-offset-y="50"></div>
|
||||
<div class="area" data-expected-width="100" data-expected-height="75"></div>
|
||||
</div>
|
||||
|
||||
<div class="grid" style="grid-template-rows: minmax(auto, 75px);">
|
||||
<div class="item1" data-offset-x="0" data-offset-y="0"></div>
|
||||
<div class="item2" data-offset-x="50" data-offset-y="50"></div>
|
||||
<div class="area" data-expected-width="100" data-expected-height="75"></div>
|
||||
</div>
|
||||
|
||||
<div class="grid" style="grid-template-rows: minmax(auto, 88px);">
|
||||
<div class="item1" data-offset-x="0" data-offset-y="0"></div>
|
||||
<div class="item2" data-offset-x="50" data-offset-y="50"></div>
|
||||
<div class="area" data-expected-width="100" data-expected-height="88"></div>
|
||||
</div>
|
||||
|
||||
<div class="grid" style="grid-template-rows: minmax(auto, 100px);">
|
||||
<div class="item1" data-offset-x="0" data-offset-y="0"></div>
|
||||
<div class="item2" data-offset-x="50" data-offset-y="50"></div>
|
||||
<div class="area" data-expected-width="100" data-expected-height="100"></div>
|
||||
</div>
|
||||
|
||||
<div class="grid" style="grid-template-rows: minmax(auto, 150px);">
|
||||
<div class="item1" data-offset-x="0" data-offset-y="0"></div>
|
||||
<div class="item2" data-offset-x="50" data-offset-y="50"></div>
|
||||
<div class="area" data-expected-width="100" data-expected-height="100"></div>
|
||||
</div>
|
||||
|
||||
<div class="grid" style="grid-template-rows: minmax(auto, auto);">
|
||||
<div class="item1" data-offset-x="0" data-offset-y="0"></div>
|
||||
<div class="item2" data-offset-x="50" data-offset-y="50"></div>
|
||||
<div class="area" data-expected-width="100" data-expected-height="100"></div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
checkLayout(".grid");
|
||||
</script>
|
||||
|
|
@ -0,0 +1,41 @@
|
|||
<!DOCTYPE html>
|
||||
<title>Hit-test of clip-path objectBoundingBox <clipPath> with additional transform</title>
|
||||
<link rel="help" href="https://drafts.fxtf.org/css-masking/#the-clip-path">
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<style>
|
||||
body {
|
||||
margin: 0;
|
||||
}
|
||||
.box {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
background-color: blue;
|
||||
margin: 100px;
|
||||
clip-path: url(#clip);
|
||||
}
|
||||
</style>
|
||||
<div class="box"></div>
|
||||
<svg height="0">
|
||||
<clipPath id="clip" clipPathUnits="objectBoundingBox" transform="scale(0.01, 0.01)">
|
||||
<polygon points="50,0 100,50 50,100 0,50"/>
|
||||
</clipPath>
|
||||
</svg>
|
||||
<script>
|
||||
function assert_element_at(element, pointlist) {
|
||||
for (let point of pointlist) {
|
||||
let result = document.elementFromPoint(point[0], point[1]);
|
||||
assert_equals(result, element, point.join(','));
|
||||
}
|
||||
}
|
||||
|
||||
test(function() {
|
||||
let div = document.querySelector('.box');
|
||||
|
||||
// Points inside clip-path.
|
||||
assert_element_at(div, [[150, 150], [150, 125], [150, 175], [125, 150], [175, 150]]);
|
||||
|
||||
// Points outside clip-path.
|
||||
assert_element_at(document.body, [[120, 120], [180, 120], [120, 180], [180, 180]]);
|
||||
});
|
||||
</script>
|
||||
|
|
@ -0,0 +1,44 @@
|
|||
<!DOCTYPE html>
|
||||
<title>Hit-test of clip-path nested objectBoundingBox <clipPath></title>
|
||||
<link rel="help" href="https://drafts.fxtf.org/css-masking/#the-clip-path">
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<style>
|
||||
body {
|
||||
margin: 0;
|
||||
}
|
||||
.box {
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
background-color: blue;
|
||||
margin: 100px;
|
||||
clip-path: url(#clip);
|
||||
}
|
||||
</style>
|
||||
<div class="box"></div>
|
||||
<svg height="0">
|
||||
<clipPath id="nested" clipPathUnits="objectBoundingBox">
|
||||
<circle cx="0.25" cy="0.25" r="0.25"/>
|
||||
</clipPath>
|
||||
<clipPath id="clip" clipPathUnits="objectBoundingBox" clip-path="url(#nested)">
|
||||
<rect width="0.5" height="0.5"/>
|
||||
</clipPath>
|
||||
</svg>
|
||||
<script>
|
||||
function assert_element_at(element, pointlist) {
|
||||
for (let point of pointlist) {
|
||||
let result = document.elementFromPoint(point[0], point[1]);
|
||||
assert_equals(result, element, point.join(','));
|
||||
}
|
||||
}
|
||||
|
||||
test(function() {
|
||||
let div = document.querySelector('.box');
|
||||
|
||||
// Points inside clip-path.
|
||||
assert_element_at(div, [[150, 150], [150, 125], [150, 175], [125, 150], [175, 150]]);
|
||||
|
||||
// Points outside clip-path.
|
||||
assert_element_at(document.body, [[110, 110], [190, 110], [110, 190], [190, 190]]);
|
||||
});
|
||||
</script>
|
||||
|
|
@ -0,0 +1,41 @@
|
|||
<!DOCTYPE html>
|
||||
<title>Hit-test of clip-path userSpaceOnUse <clipPath></title>
|
||||
<link rel="help" href="https://drafts.fxtf.org/css-masking/#the-clip-path">
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<style>
|
||||
body {
|
||||
margin: 0;
|
||||
}
|
||||
.box {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
background-color: blue;
|
||||
margin: 100px;
|
||||
clip-path: url(#clip);
|
||||
}
|
||||
</style>
|
||||
<div class="box"></div>
|
||||
<svg height="0">
|
||||
<clipPath id="clip" clipPathUnits="userSpaceOnUse">
|
||||
<polygon points="50,0 100,50 50,100 0,50"/>
|
||||
</clipPath>
|
||||
</svg>
|
||||
<script>
|
||||
function assert_element_at(element, pointlist) {
|
||||
for (let point of pointlist) {
|
||||
let result = document.elementFromPoint(point[0], point[1]);
|
||||
assert_equals(result, element, point.join(','));
|
||||
}
|
||||
}
|
||||
|
||||
test(function() {
|
||||
let div = document.querySelector('.box');
|
||||
|
||||
// Points inside clip-path.
|
||||
assert_element_at(div, [[150, 150], [150, 125], [150, 175], [125, 150], [175, 150]]);
|
||||
|
||||
// Points outside clip-path.
|
||||
assert_element_at(document.body, [[120, 120], [180, 120], [120, 180], [180, 180]]);
|
||||
});
|
||||
</script>
|
||||
|
|
@ -0,0 +1,36 @@
|
|||
<!DOCTYPE html>
|
||||
<title>Hit-test of clip-path polygon combined with box-shadow</title>
|
||||
<link rel="help" href="https://drafts.fxtf.org/css-masking/#the-clip-path">
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<style>
|
||||
body {
|
||||
margin: 0;
|
||||
}
|
||||
.box {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
background-color: blue;
|
||||
box-shadow: -100px 0px red;
|
||||
clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
|
||||
}
|
||||
</style>
|
||||
<div class="box"></div>
|
||||
<script>
|
||||
function assert_element_at(element, pointlist) {
|
||||
for (let point of pointlist) {
|
||||
let result = document.elementFromPoint(point[0], point[1]);
|
||||
assert_equals(result, element, point.join(','));
|
||||
}
|
||||
}
|
||||
|
||||
test(function() {
|
||||
let div = document.querySelector('.box');
|
||||
|
||||
// Points inside clip-path.
|
||||
assert_element_at(div, [[50, 50], [50, 25], [50, 75], [25, 50], [75, 50]]);
|
||||
|
||||
// Points outside clip-path.
|
||||
assert_element_at(document.body, [[20, 20], [80, 20], [20, 80], [80, 80]]);
|
||||
});
|
||||
</script>
|
||||
|
|
@ -0,0 +1,18 @@
|
|||
<!DOCTYPE html>
|
||||
<style>
|
||||
#test {
|
||||
width: 100px;
|
||||
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
|
||||
border: solid thin grey;
|
||||
font: 20px 'Ahem';
|
||||
line-height: 40px;
|
||||
}
|
||||
</style>
|
||||
<p>This tests the -webkit-line-clamp property with line-height applied.</p>
|
||||
<div id="test">
|
||||
XXXX XXX
|
||||
</div>
|
||||
|
|
@ -0,0 +1,22 @@
|
|||
<!DOCTYPE html>
|
||||
<link rel="match" href="webkit-line-clamp-with-line-height-ref.html">
|
||||
<link rel="help" href="https://github.com/w3c/csswg-drafts/issues/2847#issuecomment-468084957">
|
||||
<meta name="assert" content="This test checks that -webkit-line-clamp calculates respects line-height when calculating its block-size.">
|
||||
<style>
|
||||
#test {
|
||||
width: 100px;
|
||||
|
||||
display: -webkit-box;
|
||||
-webkit-box-orient: vertical;
|
||||
-webkit-line-clamp: 1;
|
||||
overflow: hidden;
|
||||
|
||||
border: solid thin grey;
|
||||
font: 20px 'Ahem';
|
||||
line-height: 40px;
|
||||
}
|
||||
</style>
|
||||
<p>This tests the -webkit-line-clamp property with line-height applied.</p>
|
||||
<div id="test">
|
||||
XXXX XXX
|
||||
</div>
|
||||
|
|
@ -0,0 +1,47 @@
|
|||
<!DOCTYPE html>
|
||||
<title>CSS Position Absolute: dynamic changes to containing block height</title>
|
||||
<link rel="author" href="mailto:atotic@google.com">
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=933054">
|
||||
<meta name="assert" content="Chrome regression: abspos descendant responds to containing block size change through line items">
|
||||
<style>
|
||||
|
||||
#container {
|
||||
position: relative;
|
||||
}
|
||||
#intermediate {
|
||||
overflow: hidden;
|
||||
width:200px;
|
||||
height:200px;
|
||||
background:red;
|
||||
}
|
||||
#block {
|
||||
height:200px;
|
||||
background:green;
|
||||
}
|
||||
#target {
|
||||
position: absolute;
|
||||
width: 200px;
|
||||
height: 100px;
|
||||
background:green;
|
||||
}
|
||||
</style>
|
||||
<!-- Test for crbug.com/933054
|
||||
Relayout optimizations cause OOF descendant not to be
|
||||
repositioned
|
||||
-->
|
||||
<div id="container">
|
||||
<div id="intermediate">
|
||||
<div id="block"></div>
|
||||
<div id="target"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
document.body.offsetTop;
|
||||
test(() => {
|
||||
document.getElementById("block").style.height = "100px";
|
||||
assert_equals(document.querySelector("#target").offsetTop, 100);
|
||||
}, '#target static position responded to parent relayout');
|
||||
</script>
|
||||
|
|
@ -0,0 +1,30 @@
|
|||
<!DOCTYPE html>
|
||||
<title>CSS Position Absolute: Chrome chrash</title>
|
||||
<link rel="author" href="mailto:atotic@google.com">
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=938224">
|
||||
<meta name="assert" content="absolute position in LI container does not crash">
|
||||
<style>
|
||||
#container {
|
||||
position: absolute;
|
||||
top: 0px;
|
||||
left: 0px;
|
||||
}
|
||||
#abs {
|
||||
position: absolute;
|
||||
top: 0px;
|
||||
left: 0px;
|
||||
}
|
||||
</style>
|
||||
<li id="container">
|
||||
<ul>
|
||||
<li>
|
||||
<div id="abs">abs</div>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
<script>
|
||||
test(() => {
|
||||
}, 'test passes if it does not crash');
|
||||
</script>
|
||||
|
|
@ -0,0 +1,6 @@
|
|||
<!DOCTYPE html>
|
||||
<div style="height: 100vh"></div>
|
||||
<div style="background: green; height: 100px"></div>
|
||||
<script>
|
||||
window.scrollTo(0, 100);
|
||||
</script>
|
||||
|
|
@ -0,0 +1,25 @@
|
|||
<!DOCTYPE html>
|
||||
<html class="reftest-wait">
|
||||
<title>z-index, will-change, mix-blend-mode on overlapping layers</title>
|
||||
<link rel="match" href="z-index-blend-will-change-overlapping-layers-ref.html">
|
||||
<link rel="help" href="https://www.w3.org/TR/CSS2/visuren.html#propdef-z-index">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-will-change/#will-change">
|
||||
<link rel="help" href="https://www.w3.org/TR/compositing-1/#mix-blend-mode">
|
||||
<meta name="assert" content="Tests z-index, will-change and mix-blend-mode on overlapping layers.
|
||||
Passes if there is a green bar when the page is scrolled to the bottom.">
|
||||
<script src="/common/reftest-wait.js"></script>
|
||||
<div style="z-index: 1; position: relative; height: 100vh">
|
||||
<div style="mix-blend-mode: multiply"></div>
|
||||
<div style="will-change: transform; position: absolute; bottom: -100px; width: 100px; height: 100px; background: red">
|
||||
</div>
|
||||
</div>
|
||||
<div style="z-index: 1; position: relative; background: green; height: 100px"></div>
|
||||
<script>
|
||||
requestAnimationFrame(()=>{
|
||||
requestAnimationFrame(()=>{
|
||||
window.scrollBy(0, 100);
|
||||
takeScreenshot();
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</html>
|
||||
|
|
@ -1,4 +1,5 @@
|
|||
<!DOCTYPE HTML>
|
||||
<meta charset="utf-8">
|
||||
<link rel="help" href="https://drafts.css-houdini.org/css-properties-values-api/#dom-css-registerproperty" />
|
||||
<link rel="help" href="https://drafts.css-houdini.org/css-properties-values-api/#supported-syntax-strings" />
|
||||
<script src="/resources/testharness.js"></script>
|
||||
|
|
@ -29,9 +30,11 @@ assert_valid(" <number>", "5");
|
|||
assert_valid("<percentage> ", "10%");
|
||||
assert_valid("<color>+", "red");
|
||||
assert_valid(" <length>+ | <percentage>", "2px 8px");
|
||||
assert_valid(" <length>+ | <color>#", "red, blue");
|
||||
assert_valid("<length>|<percentage>|<length-percentage>", "2px"); // Valid but silly
|
||||
assert_valid("<color> | <image> | <url> | <integer> | <angle>", "red");
|
||||
assert_valid("<time> | <resolution> | <transform-list> | <custom-ident>", "red");
|
||||
assert_valid("\t<color>\n| foo", "foo");
|
||||
|
||||
assert_valid("*", ":> hello");
|
||||
assert_valid("*", "([ brackets ]) { yay (??)}");
|
||||
|
|
@ -86,6 +89,7 @@ assert_valid("banana", "banana");
|
|||
assert_valid("bAnAnA", "bAnAnA");
|
||||
assert_valid("ba-na-nya", "ba-na-nya");
|
||||
assert_valid("banana", "banan\\61");
|
||||
assert_valid("banan\\61", "banana");
|
||||
assert_valid("<custom-ident>", "banan\\61");
|
||||
assert_valid("big | bigger | BIGGER", "bigger");
|
||||
assert_valid("foo+|bar", "foo foo foo");
|
||||
|
|
@ -99,9 +103,14 @@ assert_valid(null, "null");
|
|||
assert_valid(undefined, "undefined");
|
||||
assert_valid(["array"], "array");
|
||||
|
||||
assert_valid("\\1F914", "🤔");
|
||||
assert_valid("hmm\\1F914", "hmm🤔");
|
||||
assert_valid("\\1F914hmm", "🤔hmm");
|
||||
assert_valid("\\1F914 hmm", "🤔hmm");
|
||||
assert_valid("\\1F914\\1F914", "🤔🤔");
|
||||
|
||||
// Invalid syntax
|
||||
assert_invalid("banana,nya", "banana");
|
||||
assert_invalid("banan\\61", "banana");
|
||||
assert_invalid("<\\6c ength>", "10px");
|
||||
assert_invalid("<banana>", "banana");
|
||||
assert_invalid("<Number>", "10");
|
||||
|
|
@ -110,11 +119,20 @@ assert_invalid("<LENGTH>", "10px");
|
|||
assert_invalid("< length>", "10px");
|
||||
assert_invalid("<length >", "10px");
|
||||
assert_invalid("<length> +", "10px");
|
||||
assert_invalid("<transform-list>+", "scale(2)");
|
||||
assert_invalid("<transform-list>#", "scale(2)");
|
||||
|
||||
assert_invalid("<length>++", "10px");
|
||||
assert_invalid("<length>##", "10px");
|
||||
assert_invalid("<length>+#", "10px");
|
||||
assert_invalid("<length>#+", "10px");
|
||||
assert_invalid("<length> | *", "10px");
|
||||
assert_invalid("*|banana", "banana");
|
||||
assert_invalid("|banana", "banana");
|
||||
assert_invalid("*+", "banana");
|
||||
assert_invalid("|", "banana");
|
||||
assert_invalid(" |", "banana");
|
||||
assert_invalid("||", "banana");
|
||||
|
||||
assert_invalid("initial", "initial");
|
||||
assert_invalid("inherit", "inherit");
|
||||
|
|
|
|||
|
|
@ -0,0 +1,19 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Scroll Anchoring: getComputedValue().overflowAnchor</title>
|
||||
<link rel="help" href="https://drafts.csswg.org/css-scroll-anchoring/#propdef-overflow-anchor">
|
||||
<meta name="assert" content="overflow-anchor 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("overflow-anchor", "auto");
|
||||
test_computed_value("overflow-anchor", "none");
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,18 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Scroll Anchoring: parsing overflow-anchor with invalid values</title>
|
||||
<link rel="help" href="https://drafts.csswg.org/css-scroll-anchoring/#propdef-overflow-anchor">
|
||||
<meta name="assert" content="overflow-anchor supports only the grammar 'auto | none'.">
|
||||
<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("overflow-anchor", "all");
|
||||
test_invalid_value("overflow-anchor", "auto none");
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,18 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Scroll Anchoring: parsing overflow-anchor with valid values</title>
|
||||
<link rel="help" href="https://drafts.csswg.org/css-scroll-anchoring/#propdef-overflow-anchor">
|
||||
<meta name="assert" content="overflow-anchor supports the full grammar 'auto | none'.">
|
||||
<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("overflow-anchor", "auto");
|
||||
test_valid_value("overflow-anchor", "none");
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -42,7 +42,7 @@ div {
|
|||
}
|
||||
</style>
|
||||
<div class="scroller-x" id="one-target">
|
||||
<div id="space"></div>
|
||||
<div class="space"></div>
|
||||
<div class="large-x target" id="single" style="left: 200px;"></div>
|
||||
</div>
|
||||
|
||||
|
|
@ -150,4 +150,4 @@ test(() => {
|
|||
}, "Snap to current scroll position on x as the area is covering x axis." +
|
||||
"However, we snap to the specified snap position on y as the area is not " +
|
||||
"covering y axis.");
|
||||
</script>
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -38,7 +38,7 @@ var height = scroller.clientHeight;
|
|||
[
|
||||
["horizontal-tb", 300, 500 - height],
|
||||
["vertical-lr", 500 - width, 300],
|
||||
["vertical-rl", 300, 300]
|
||||
["vertical-rl", width - 700, 300]
|
||||
].forEach(([writing_mode, left, top]) => {
|
||||
test(() => {
|
||||
scroller.style.writingMode = writing_mode;
|
||||
|
|
@ -50,4 +50,4 @@ var height = scroller.clientHeight;
|
|||
}, "Snaps correctly for " + writing_mode +
|
||||
" writing mode with 'inline' and 'block' alignments");
|
||||
})
|
||||
</script>
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,16 @@
|
|||
<!DOCTYPE html>
|
||||
<html class=reftest-wait>
|
||||
<meta name="assert" content="Checks that an absolute positioned element is positioned correctly, when the available size of its parent changes due to document resize." />
|
||||
<link rel="help" href="https://crbug.com/928672">
|
||||
<link rel="match" href="../reference/ref-filled-green-100px-square-only.html">
|
||||
<script src="/common/reftest-wait.js"></script>
|
||||
<p>Test passes if there is a filled green square.</p>
|
||||
<iframe id="target" height="100" width="200" src="support/dynamic-available-size-iframe.html" style="border: none;"></iframe>
|
||||
<script>
|
||||
onload = () => {
|
||||
requestAnimationFrame(() => requestAnimationFrame(() => {
|
||||
target.width = '100';
|
||||
takeScreenshot();
|
||||
}));
|
||||
};
|
||||
</script>
|
||||
|
|
@ -0,0 +1,33 @@
|
|||
<!DOCTYPE html>
|
||||
<style>
|
||||
body { margin: 0; }
|
||||
.parent {
|
||||
position: relative;
|
||||
display: flex;
|
||||
width: 100%;
|
||||
height: 100px;
|
||||
background: red;
|
||||
}
|
||||
|
||||
.content {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
margin: auto;
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
background: green;
|
||||
}
|
||||
|
||||
svg {
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
}
|
||||
</style>
|
||||
<div class="parent">
|
||||
<div class="content">
|
||||
<svg xmlns="http://www.w3.org/2000/svg"></svg>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -0,0 +1,40 @@
|
|||
<!DOCTYPE html>
|
||||
<html class="reftest-wait">
|
||||
<head>
|
||||
<title>
|
||||
Individual transform properties' animations create stacking context in delay phase
|
||||
</title>
|
||||
<link rel="help" href="https://drafts.csswg.org/css-transforms-2/#individual-transforms">
|
||||
<link rel="match" href="stacking-context-ref.html">
|
||||
<meta name="assert" content="Individual transform properties' animations
|
||||
should create stacking context even in delay
|
||||
phase."/>
|
||||
<style>
|
||||
#back {
|
||||
height: 100px;
|
||||
width: 100px;
|
||||
position: fixed;
|
||||
background: green;
|
||||
margin-top: 50px;
|
||||
}
|
||||
@keyframes scale {
|
||||
from, to { scale: 1; }
|
||||
}
|
||||
#test {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
background: blue;
|
||||
animation: scale 100s 100s;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div id="back"></div>
|
||||
<div id="test"></div>
|
||||
</body>
|
||||
<script>
|
||||
requestAnimationFrame(() => {
|
||||
document.documentElement.classList.remove('reftest-wait');
|
||||
});
|
||||
</script>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,27 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>
|
||||
Reference: Individual transform properties' animations create stacking context in delay phase
|
||||
</title>
|
||||
<style>
|
||||
#back {
|
||||
height: 100px;
|
||||
width: 100px;
|
||||
position: fixed;
|
||||
background: green;
|
||||
margin-top: 50px;
|
||||
}
|
||||
#test {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
background: blue;
|
||||
will-change: transform;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div id="back"></div>
|
||||
<div id="test"></div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -24,7 +24,7 @@ runListValuedPropertyTests('animation-timing-function', [
|
|||
]);
|
||||
|
||||
runUnsupportedPropertyTests('animation-timing-function', [
|
||||
'cubic-bezier(0.1, 0.7, 1.0, 0.1)', 'steps(4, end)', 'frames(10)'
|
||||
'cubic-bezier(0.1, 0.7, 1.0, 0.1)', 'steps(4, end)'
|
||||
]);
|
||||
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -24,7 +24,7 @@ runListValuedPropertyTests('transition-timing-function', [
|
|||
]);
|
||||
|
||||
runUnsupportedPropertyTests('transition-timing-function', [
|
||||
'cubic-bezier(0.1, 0.7, 1.0, 0.1)', 'steps(4, end)', 'frames(10)'
|
||||
'cubic-bezier(0.1, 0.7, 1.0, 0.1)', 'steps(4, end)'
|
||||
]);
|
||||
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -2,5 +2,5 @@ Template-Python==0.1.post1
|
|||
html5lib==1.0.1
|
||||
lxml==4.1.1
|
||||
mercurial==4.5
|
||||
six==1.11.0
|
||||
six==1.12.0
|
||||
webencodings==0.5.1
|
||||
|
|
|
|||
|
|
@ -15,7 +15,7 @@
|
|||
|
||||
#too-wide {
|
||||
display: inline-block;
|
||||
height: 20px;
|
||||
height: 21px;
|
||||
width: 250px;
|
||||
background: blue;
|
||||
}
|
||||
|
|
@ -24,11 +24,31 @@
|
|||
width: 100px;
|
||||
height: 100px;
|
||||
float: left;
|
||||
/* We use a gradient, which is part of the CSS 'image' type.
|
||||
* We set it up to create a hard diagonal edge from the bottom left to the
|
||||
* top right of #shape, which slices through each pixel along the diagonal.
|
||||
* Theoretically, this should place #too-wide at position 50,50 within
|
||||
* #shape's 100x100 region, but on some devices, the gradient rasterization
|
||||
* may leave pixel 50,49 unshaded enough that #too-wide is placed there
|
||||
* instead. To account for that possible off-by-one rounding scenario,
|
||||
* we set things up as follows:
|
||||
* - We make #too-wide 1px taller than the corresponding content in the
|
||||
* reference case.
|
||||
* - We clip the outermost div using a 'clip-path' that only paints
|
||||
* the region where the corresponding content is in the reference case.
|
||||
* - If the testcase renders properly, then #too-wide will have 1px of
|
||||
* content clipped off of its top or bottom (depending on how the
|
||||
* linear-gradient rasterization and rounding works out). Either way,
|
||||
* it'll match the reference case.
|
||||
*/
|
||||
shape-outside: linear-gradient(135deg, black, black 50%, transparent 50%);
|
||||
}
|
||||
.clip {
|
||||
clip-path: inset(50px 0 30px 0px);
|
||||
}
|
||||
</style>
|
||||
|
||||
<div style="width: 300px; height: 100px;">
|
||||
<div style="width: 300px; height: 100px;" class="clip">
|
||||
<div id="shape"></div>
|
||||
<span id="too-wide"></span>
|
||||
<div>
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
<!DOCTYPE HTML>
|
||||
<meta charset="utf-8">
|
||||
<title>Test for retrying floats and pushing them partway down the float area</title>
|
||||
<title>Reference for retrying floats and pushing them partway down the float area</title>
|
||||
<link rel="author" title="Brad Werth" href="mailto:bwerth@mozilla.com">
|
||||
<link rel="author" title="Mozilla" href="http://www.mozilla.org/">
|
||||
<style>
|
||||
|
|
|
|||
|
|
@ -105,7 +105,6 @@
|
|||
|
||||
# Tests of shape-outside layout behavior with too-wide inline elements
|
||||
== float-retry-push-circle.html float-retry-push-ref.html
|
||||
# The next test offsets a 250px wide element up to one pixel due to small offsets in gradient generation.
|
||||
== float-retry-push-image.html float-retry-push-ref.html
|
||||
== float-retry-push-inset.html float-retry-push-ref.html
|
||||
== float-retry-push-polygon.html float-retry-push-ref.html
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue