mirror of
https://github.com/LadybirdBrowser/ladybird.git
synced 2025-09-21 00:38:56 +00:00
Tests/LibWeb: Import CSS floats tests from WPT
This commit is contained in:
Aliaksandr Kalenik
Andreas Kling
parent
7460f0c6e2
commit
bd50a31be6
Notes:
github-actions[bot]
2024-11-11 12:32:30 +00:00
Author: https://github.com/kalenikaliaksandr
Commit: bd50a31be6
Pull-request: https://github.com/LadybirdBrowser/ladybird/pull/2273
183 changed files with 5216 additions and 0 deletions
|
|
@ -0,0 +1,28 @@
|
|||
<!doctype html>
|
||||
<link rel="help" href="https://drafts.csswg.org/css2/visuren.html" />
|
||||
<title>The computed value of float with absolute positioning when there is no box should be "none"</title>
|
||||
<script src="../../../resources/testharness.js"></script>
|
||||
<script src="../../../resources/testharnessreport.js"></script>
|
||||
<style>
|
||||
|
||||
div[id] {
|
||||
position: absolute;
|
||||
float: left;
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
<div id="test1" style="display: none"></div>
|
||||
<div id="test2" style="display: contents"></div>
|
||||
<div style="display: none"><div id="test3"></div></div>
|
||||
|
||||
<script>
|
||||
promise_test(
|
||||
t => {
|
||||
return new Promise(test => addEventListener('load', e=>test()))
|
||||
.then(test => assert_equals(getComputedStyle(test1)['float'], "none", "[display:none] Invalid gCS(test1)['float'];"))
|
||||
.then(test => assert_equals(getComputedStyle(test2)['float'], "none", "[display:contents] Invalid gCS(test2)['float'];"))
|
||||
.then(test => assert_equals(getComputedStyle(test3)['float'], "none", "[in a display:none] Invalid gCS(test3)['float'];"))
|
||||
}
|
||||
);
|
||||
</script>
|
||||
|
|
@ -0,0 +1,13 @@
|
|||
<!DOCTYPE html>
|
||||
<title>Floats in self-painting inline box should not crash</title>
|
||||
<link rel="help" href="https://crbug.com/1109565">
|
||||
<link rel="author" href="kojii@chromium.org">
|
||||
<script src="../../../resources/testharness.js"></script>
|
||||
<script src="../../../resources/testharnessreport.js"></script>
|
||||
<span style='opacity: 0.5'>
|
||||
<div style="float: right">X</div>
|
||||
</span>
|
||||
<img title="ABC">
|
||||
<script>
|
||||
test(() => {}, "Pass if not crashes");
|
||||
</script>
|
||||
|
|
@ -0,0 +1,30 @@
|
|||
<!DOCTYPE html>
|
||||
<link rel=author href="mailto:jarhar@chromium.org">
|
||||
<link rel=help href="https://github.com/w3c/csswg-drafts/issues/4441">
|
||||
<script src="../../../resources/testharness.js"></script>
|
||||
<script src="../../../resources/testharnessreport.js"></script>
|
||||
<script src="../../../css/support/interpolation-testcommon.js"></script>
|
||||
|
||||
<body>
|
||||
<script>
|
||||
// Use default transition-behavior: normal.
|
||||
test_no_interpolation({
|
||||
property: 'float',
|
||||
from: 'initial',
|
||||
to: 'right'
|
||||
});
|
||||
|
||||
test_interpolation({
|
||||
property: 'float',
|
||||
behavior: 'allow-discrete',
|
||||
from: 'left',
|
||||
to: 'right',
|
||||
}, [
|
||||
{at: -1, expect: 'left'},
|
||||
{at: 0, expect: 'left'},
|
||||
{at: 0.4, expect: 'left'},
|
||||
{at: 0.5, expect: 'right'},
|
||||
{at: 1, expect: 'right'},
|
||||
{at: 1.5, expect: 'right'},
|
||||
]);
|
||||
</script>
|
||||
|
|
@ -0,0 +1,18 @@
|
|||
<!DOCTYPE html>
|
||||
<link rel="help" href="https://crbug.com/972904">
|
||||
<script src="../../../resources/testharness.js"></script>
|
||||
<script src="../../../resources/testharnessreport.js"></script>
|
||||
|
||||
<div style="margin-top:-100000000px;">
|
||||
<div style="margin-bottom:-100000000px; padding-top: 1px;"></div>
|
||||
text <!-- "text" is placed at the highest possible location due to saturated margin top values. -->
|
||||
<div style="float: left; width: 60px; height: 20px;"></div>
|
||||
<div style="margin-top: 10px;">
|
||||
<div style="float: left; width: 10px;"></div>
|
||||
<div style="float: left; width: 100px; height: 100px;"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
test(() => { }, 'test passes if it does not crash');
|
||||
</script>
|
||||
|
|
@ -0,0 +1,21 @@
|
|||
<!DOCTYPE html>
|
||||
<link rel="help" href="https://crbug.com/977856">
|
||||
<link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#floats" />
|
||||
<link rel="author" title="Koji Ishii" href="mailto:kojii@chromium.org">
|
||||
<script src="../../../resources/testharness.js"></script>
|
||||
<script src="../../../resources/testharnessreport.js"></script>
|
||||
<div style="width: 270px">
|
||||
<img width="260" height="68">
|
||||
<div style="float: left">
|
||||
<a id="target" href="#">Link</a>
|
||||
</div>
|
||||
<br style="clear: both">
|
||||
</div>
|
||||
<script>
|
||||
test(() => {
|
||||
let target = document.getElementById('target');
|
||||
let bounds = target.getBoundingClientRect();
|
||||
let element = document.elementFromPoint(bounds.x + 1, bounds.y + 1);
|
||||
assert_equals(element, target);
|
||||
});
|
||||
</script>
|
||||
|
|
@ -0,0 +1,14 @@
|
|||
<!DOCTYPE html>
|
||||
<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org">
|
||||
<link rel="help" href="https://www.w3.org/TR/CSS22/visuren.html#floats">
|
||||
<link rel="help" href="https://www.w3.org/TR/CSS22/zindex.html">
|
||||
<div id="f1" style="float:left; width:100px; height:100px;"></div>
|
||||
<div id="f2" style="float:left; width:100px; height:100px; margin-top:50px; margin-left:-50px;"></div>
|
||||
<script src="../../../resources/testharness.js"></script>
|
||||
<script src="../../../resources/testharnessreport.js"></script>
|
||||
<script>
|
||||
test(()=> {
|
||||
var elm = document.elementFromPoint(70, 70);
|
||||
assert_equals(elm.id, "f2");
|
||||
}, "Hit test float");
|
||||
</script>
|
||||
|
|
@ -0,0 +1,15 @@
|
|||
<!DOCTYPE html>
|
||||
<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org">
|
||||
<link rel="help" href="https://www.w3.org/TR/CSS22/visuren.html#floats">
|
||||
<link rel="help" href="https://www.w3.org/TR/CSS22/zindex.html">
|
||||
<div id="target" style="width:100px; height:100px;">
|
||||
<div id="error" style="float:left; position:relative; z-index:-1; width:100px; height:100px;"></div>
|
||||
</div>
|
||||
<script src="../../../resources/testharness.js"></script>
|
||||
<script src="../../../resources/testharnessreport.js"></script>
|
||||
<script>
|
||||
test(()=> {
|
||||
var elm = document.elementFromPoint(50, 50);
|
||||
assert_equals(elm.id, "target");
|
||||
}, "Miss float below something else");
|
||||
</script>
|
||||
|
|
@ -0,0 +1,16 @@
|
|||
<!DOCTYPE html>
|
||||
<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org">
|
||||
<link rel="help" href="https://www.w3.org/TR/CSS22/visuren.html#floats">
|
||||
<link rel="help" href="https://www.w3.org/TR/CSS22/zindex.html">
|
||||
<div id="error" style="overflow:hidden; width:100px; height:100px;"></div>
|
||||
<div style="margin-top:-100px; overflow:hidden; width:100px; height:100px;">
|
||||
<div id="target" style="float:left; width:100px; height:100px;"></div>
|
||||
</div>
|
||||
<script src="../../../resources/testharness.js"></script>
|
||||
<script src="../../../resources/testharnessreport.js"></script>
|
||||
<script>
|
||||
test(()=> {
|
||||
var elm = document.elementFromPoint(50, 50);
|
||||
assert_equals(elm.id, "target");
|
||||
}, "Miss float below something else");
|
||||
</script>
|
||||
|
|
@ -0,0 +1,17 @@
|
|||
<!DOCTYPE html>
|
||||
<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org">
|
||||
<link rel="help" href="https://www.w3.org/TR/CSS22/visuren.html#floats">
|
||||
<link rel="help" href="https://www.w3.org/TR/CSS22/visufx.html#propdef-overflow">
|
||||
<div id="target" style="height:200px;">
|
||||
<div style="overflow:hidden; width:100px; height:100px;">
|
||||
<div id="error" style="float:left; width:100px; height:200px;"></div>
|
||||
</div>
|
||||
</div>
|
||||
<script src="../../../resources/testharness.js"></script>
|
||||
<script src="../../../resources/testharnessreport.js"></script>
|
||||
<script>
|
||||
test(()=> {
|
||||
var elm = document.elementFromPoint(50, 150);
|
||||
assert_equals(elm.id, "target");
|
||||
}, "Miss clipped float");
|
||||
</script>
|
||||
|
|
@ -0,0 +1,17 @@
|
|||
<!DOCTYPE html>
|
||||
<title>List item taller than the first opportunity should not crash</title>
|
||||
<link rel="author" title="Koji Ishii" href="mailto:kojii@chromium.org">
|
||||
<link rel="help" href="https://www.w3.org/TR/CSS22/visuren.html#float-position" title="9.5.1 Positioning the float: the 'float' property">
|
||||
<link rel="help" href="http://crbug.com/967997">
|
||||
<script src="../../../resources/testharness.js"></script>
|
||||
<script src="../../../resources/testharnessreport.js"></script>
|
||||
<body>
|
||||
<div style="float: left; width: 5px; height: 5px;"></div>
|
||||
<div style="clear: left; float: left; width: 10px; height: 5px;"></div>
|
||||
<ul>
|
||||
<li></li>
|
||||
</ul>
|
||||
<script>
|
||||
test(() => {}, "Layout should not crash");
|
||||
</script>
|
||||
</body>
|
||||
|
|
@ -0,0 +1,30 @@
|
|||
<!DOCTYPE html>
|
||||
<title>Removing floats in ::first-line should not crash</title>
|
||||
<link rel="author" href="kojii@chromium.org">
|
||||
<link rel="help" href="https://crbug.com/1100900">
|
||||
<meta name="assert" content="Removing floats in ::first-line should not crash">
|
||||
<style>
|
||||
#container {
|
||||
display: flow-root;
|
||||
}
|
||||
#container::first-line {
|
||||
background: orange;
|
||||
}
|
||||
#float {
|
||||
float: left;
|
||||
}
|
||||
</style>
|
||||
<script src="../../../resources/testharness.js"></script>
|
||||
<script src="../../../resources/testharnessreport.js"></script>
|
||||
<body>
|
||||
<div id="container">text<span id="float"></span></div>
|
||||
</body>
|
||||
<script>
|
||||
test(() => {
|
||||
document.body.offsetTop;
|
||||
let float = document.getElementById('float');
|
||||
float.remove();
|
||||
let container = document.getElementById('container');
|
||||
container.style.color = 'blue';
|
||||
}, 'No crash or DCHECK failure');
|
||||
</script>
|
||||
|
|
@ -0,0 +1,31 @@
|
|||
<!DOCTYPE html>
|
||||
<title>Removing floats changed to positioned object should not crash</title>
|
||||
<link rel="author" href="kojii@chromium.org">
|
||||
<link rel="help" href="https://crbug.com/1101277">
|
||||
<meta name="assert" content="Removing floats changed to positioned object should not crash">
|
||||
<style>
|
||||
.float {
|
||||
float: left;
|
||||
}
|
||||
.abs {
|
||||
position: absolute;
|
||||
}
|
||||
</style>
|
||||
<script src="../../../resources/testharness.js"></script>
|
||||
<script src="../../../resources/testharnessreport.js"></script>
|
||||
<body>
|
||||
<div id="container">text<span id="target" class="float"></span></div>
|
||||
</body>
|
||||
<script>
|
||||
test(() => {
|
||||
document.body.offsetTop;
|
||||
let target = document.getElementById('target');
|
||||
|
||||
// Change `#target` from floating object to positioned object.
|
||||
target.className = 'abs';
|
||||
document.body.offsetTop;
|
||||
|
||||
// and remove it.
|
||||
target.remove();
|
||||
}, 'No crash or DCHECK failure');
|
||||
</script>
|
||||
|
|
@ -0,0 +1,15 @@
|
|||
<!DOCTYPE html>
|
||||
<title>A zero-width new formatting context should fit in a zero-width layout opportunity between floats</title>
|
||||
<link rel="author" title="Morten Stenshorne" href="mstensho@chromium.org">
|
||||
<link rel="help" href="https://www.w3.org/TR/CSS22/visuren.html#float-position" title="9.5.1 Positioning the float: the 'float' property">
|
||||
<script src="../../../resources/testharness.js"></script>
|
||||
<script src="../../../resources/testharnessreport.js"></script>
|
||||
<script src="../../../resources/check-layout-th.js"></script>
|
||||
<div id="container" style="position:relative; width:200px;">
|
||||
<div style="float:left; width:100px; height:200px;"></div>
|
||||
<div style="float:right; width:100px; height:200px;"></div>
|
||||
<div data-offset-x="100" data-offset-y="0" style="overflow:hidden; width:0; height:200px;"></div>
|
||||
</div>
|
||||
<script>
|
||||
checkLayout("#container");
|
||||
</script>
|
||||
|
|
@ -0,0 +1,16 @@
|
|||
<!DOCTYPE html>
|
||||
<title>A zero-width new formatting context should fit in a zero-width layout opportunity between floats, above a 100% wide float</title>
|
||||
<link rel="author" title="Morten Stenshorne" href="mstensho@chromium.org">
|
||||
<link rel="help" href="https://www.w3.org/TR/CSS22/visuren.html#float-position" title="9.5.1 Positioning the float: the 'float' property">
|
||||
<script src="../../../resources/testharness.js"></script>
|
||||
<script src="../../../resources/testharnessreport.js"></script>
|
||||
<script src="../../../resources/check-layout-th.js"></script>
|
||||
<div id="container" style="position:relative; width:200px;">
|
||||
<div style="float:left; width:100px; height:200px;"></div>
|
||||
<div style="float:right; width:100px; height:200px;"></div>
|
||||
<div style="float:right; width:100%; height:10px;"></div>
|
||||
<div data-offset-x="100" data-offset-y="0" style="overflow:hidden; width:0; height:200px;"></div>
|
||||
</div>
|
||||
<script>
|
||||
checkLayout("#container");
|
||||
</script>
|
||||
|
|
@ -0,0 +1,16 @@
|
|||
<!DOCTYPE html>
|
||||
<title>Zero-width new formatting context with clearance</title>
|
||||
<link rel="author" title="Morten Stenshorne" href="mstensho@chromium.org">
|
||||
<link rel="help" href="https://www.w3.org/TR/CSS22/visuren.html#float-position" title="9.5.1 Positioning the float: the 'float' property">
|
||||
<script src="../../../resources/testharness.js"></script>
|
||||
<script src="../../../resources/testharnessreport.js"></script>
|
||||
<script src="../../../resources/check-layout-th.js"></script>
|
||||
<div id="container" style="position:relative; width:200px;">
|
||||
<div style="float:left; width:100px; height:100px;"></div>
|
||||
<div style="float:right; width:100px; height:100px;"></div>
|
||||
<div style="float:right; width:100%; height:100px;"></div>
|
||||
<div data-offset-x="0" data-offset-y="100" style="overflow:hidden; clear:left; width:0;"></div>
|
||||
</div>
|
||||
<script>
|
||||
checkLayout("#container");
|
||||
</script>
|
||||
|
|
@ -0,0 +1,16 @@
|
|||
<!DOCTYPE html>
|
||||
<title>Zero-width new formatting context with clearance</title>
|
||||
<link rel="author" title="Morten Stenshorne" href="mstensho@chromium.org">
|
||||
<link rel="help" href="https://www.w3.org/TR/CSS22/visuren.html#float-position" title="9.5.1 Positioning the float: the 'float' property">
|
||||
<script src="../../../resources/testharness.js"></script>
|
||||
<script src="../../../resources/testharnessreport.js"></script>
|
||||
<script src="../../../resources/check-layout-th.js"></script>
|
||||
<div id="container" style="position:relative; width:200px;">
|
||||
<div style="float:left; width:100px; height:100px;"></div>
|
||||
<div style="float:right; width:100px; height:100px;"></div>
|
||||
<div style="float:right; width:100%; height:100px;"></div>
|
||||
<div data-offset-x="0" data-offset-y="200" style="overflow:hidden; clear:right; width:0;"></div>
|
||||
</div>
|
||||
<script>
|
||||
checkLayout("#container");
|
||||
</script>
|
||||
Loading…
Add table
Add a link
Reference in a new issue