mirror of
https://github.com/servo/servo.git
synced 2025-08-04 05:00:08 +01:00
Update web-platform-tests to revision b'b728032f59a396243864b0f8584e7211e3632005'
This commit is contained in:
WPT Sync Bot
parent
ace9b32b1c
commit
df68c4e5d1
15632 changed files with 514865 additions and 155000 deletions
|
|
@ -0,0 +1,17 @@
|
|||
<!doctype html>
|
||||
<title>CSS Overflow Test: Chrome scrollbar crash - multiple body elements, removed stylesheet</title>
|
||||
<style id="sheet">
|
||||
</style>
|
||||
<style>
|
||||
body {
|
||||
overflow: scroll;
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
}
|
||||
</style>
|
||||
<body>Pass if no crash</body>
|
||||
<script>
|
||||
document.body.offsetTop;
|
||||
sheet.remove();
|
||||
document.documentElement.insertBefore(document.createElement("body"), document.body);
|
||||
</script>
|
||||
|
|
@ -0,0 +1,16 @@
|
|||
<!doctype html>
|
||||
<meta charset="utf-8">
|
||||
<title>display:flex on svg uses 0 as min size with default overflow</title>
|
||||
<link rel="help" href="https://www.w3.org/TR/css-overflow-3/#valdef-overflow">
|
||||
<link rel="author" title="Khushal Sagar" href="mailto:khushalsagar@chromium.org">
|
||||
<style>
|
||||
body {
|
||||
background: lightblue;
|
||||
}
|
||||
div {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
background: green;
|
||||
}
|
||||
</style>
|
||||
<div></div>
|
||||
|
|
@ -0,0 +1,24 @@
|
|||
<!doctype html>
|
||||
<meta charset="utf-8">
|
||||
<title>display:flex on svg uses 0 as min size with default overflow</title>
|
||||
<link rel="help" href="https://www.w3.org/TR/css-overflow-3/#valdef-overflow">
|
||||
<link rel="author" title="Khushal Sagar" href="mailto:khushalsagar@chromium.org">
|
||||
<link rel="match" href="display-flex-svg-overflow-default-ref.html">
|
||||
<style>
|
||||
body {
|
||||
background: lightblue;
|
||||
}
|
||||
div {
|
||||
display: flex;
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
}
|
||||
svg {
|
||||
flex-grow: 1;
|
||||
}
|
||||
</style>
|
||||
<div>
|
||||
<svg>
|
||||
<rect width="150" height="150" fill="green"></rect>
|
||||
</svg>
|
||||
</div>
|
||||
|
|
@ -0,0 +1,67 @@
|
|||
<!DOCTYPE html>
|
||||
|
||||
<meta charset="UTF-8">
|
||||
|
||||
<title>CSS Overflow Test: margin-block-end, scrolling area height and scrollTop (complex)</title>
|
||||
|
||||
<link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/">
|
||||
<link rel="help" href="https://www.w3.org/TR/css-overflow-3/#scrollable">
|
||||
<link rel="help" href="https://www.w3.org/TR/cssom-view-1/#dom-element-scrolltop">
|
||||
<link rel="help" href="https://www.w3.org/TR/cssom-view-1/#scrolling-area">
|
||||
<link rel="match" href="reference/ref-if-there-is-no-red.xht">
|
||||
|
||||
<!--
|
||||
|
||||
This test is a slightly modified version of the testcase from
|
||||
|
||||
Morten Stenshorne coming from
|
||||
|
||||
https://bugs.chromium.org/p/chromium/issues/detail?id=750992#c8
|
||||
|
||||
-->
|
||||
|
||||
<meta content="" name="flags">
|
||||
<meta content="This test checks that when the bottom edge of an element's scrolling area is the bottom margin edge of all of the element's descendants' boxes, then the element.scrollTop must reach such bottom edge. In this test, the tested element's scrolling area height must reach the end edge of the margin-bottom of the p element." name="assert">
|
||||
|
||||
<style>
|
||||
div
|
||||
{
|
||||
height: 200px;
|
||||
}
|
||||
|
||||
div#test
|
||||
{
|
||||
font-size: 100px;
|
||||
/*
|
||||
Setting a font-size of 100px is to influence the
|
||||
margin on the P without setting it directly.
|
||||
*/
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
div#red
|
||||
{
|
||||
background-color: red;
|
||||
}
|
||||
|
||||
div#red > p
|
||||
{
|
||||
height: 1px;
|
||||
}
|
||||
</style>
|
||||
|
||||
<body onload="document.getElementById('test').scrollTop = 200;">
|
||||
|
||||
<p>Test passes if there is <strong>no red</strong>.
|
||||
|
||||
<div id="test">
|
||||
|
||||
<div id="red">
|
||||
|
||||
<div id="filler"></div>
|
||||
|
||||
<p>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
|
@ -11,6 +11,6 @@
|
|||
test(function() {
|
||||
var container = document.getElementById("container");
|
||||
assert_equals(container.scrollWidth, 100);
|
||||
assert_equals(container.scrollHeight, 100);
|
||||
}, "Only trailing *block* margins should affect overflow");
|
||||
assert_equals(container.scrollHeight, 300);
|
||||
});
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -7,7 +7,6 @@
|
|||
<link rel="match" href="overflow-body-propagation-010-ref.html">
|
||||
<style>
|
||||
body {
|
||||
overflow: -moz-hidden-unscrollable; /* will be removed in bug 1531609 */
|
||||
overflow: clip;
|
||||
contain: paint;
|
||||
width: 30px;
|
||||
|
|
|
|||
|
|
@ -0,0 +1,13 @@
|
|||
<!doctype html>
|
||||
<meta charset="utf-8">
|
||||
<title>Verifies overflow applies to canvas elements</title>
|
||||
<link rel="help" href="https://drafts.csswg.org/css-overflow/#propdef-overflow">
|
||||
<link rel="author" title="Khushal Sagar" href="mailto:khushalsagar@chromium.org">
|
||||
<script src="../css-images/support/testHelper.js"></script>
|
||||
<body>
|
||||
<canvas></canvas>
|
||||
</body>
|
||||
<script>
|
||||
paintCanvases();
|
||||
</script>
|
||||
|
||||
|
|
@ -0,0 +1,22 @@
|
|||
<!doctype html>
|
||||
<meta charset="utf-8">
|
||||
<title>Verifies overflow applies to canvas elements</title>
|
||||
<link rel="help" href="https://drafts.csswg.org/css-overflow/#propdef-overflow">
|
||||
<link rel="author" title="Khushal Sagar" href="mailto:khushalsagar@chromium.org">
|
||||
<link rel="match" href="overflow-canvas-ref.html">
|
||||
<script src="../css-images/support/testHelper.js"></script>
|
||||
<style>
|
||||
.default {
|
||||
width: 25px;
|
||||
height: 50px;
|
||||
object-fit: none;
|
||||
object-position: 0% 0%;
|
||||
overflow: visible;
|
||||
}
|
||||
</style>
|
||||
<body>
|
||||
<canvas class=default></canvas>
|
||||
</body>
|
||||
<script>
|
||||
paintCanvases();
|
||||
</script>
|
||||
|
|
@ -8,6 +8,8 @@
|
|||
overflow: auto;
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
/* Avoids some fuzz on scrollbar corners */
|
||||
scrollbar-color: blue blue;
|
||||
}
|
||||
.child {
|
||||
position: relative;
|
||||
|
|
|
|||
|
|
@ -9,6 +9,8 @@
|
|||
overflow: auto;
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
/* Avoids some fuzz on scrollbar corners */
|
||||
scrollbar-color: blue blue;
|
||||
}
|
||||
.parent {
|
||||
width: 100px;
|
||||
|
|
|
|||
|
|
@ -8,6 +8,8 @@
|
|||
overflow: auto;
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
/* Avoids some fuzz on scrollbar corners */
|
||||
scrollbar-color: blue blue;
|
||||
}
|
||||
.child {
|
||||
position: relative;
|
||||
|
|
|
|||
|
|
@ -9,6 +9,8 @@
|
|||
overflow: auto;
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
/* Avoids some fuzz on scrollbar corners */
|
||||
scrollbar-color: blue blue;
|
||||
}
|
||||
.parent {
|
||||
width: 100px;
|
||||
|
|
|
|||
|
|
@ -0,0 +1,2 @@
|
|||
<!doctype html>
|
||||
<div style="width: 100px; height: 100px; background: green"></div>
|
||||
|
|
@ -0,0 +1,35 @@
|
|||
<!doctype html>
|
||||
<meta charset="utf-8">
|
||||
<title>Overflow-clip-margin: child of a small-border-box out-of-view large-clip-margin parent is shown</title>
|
||||
<link rel="help" href="https://www.w3.org/TR/css-overflow-3/#propdef-overflow-clip-margin">
|
||||
<link rel="author" title="Xianzhu Wang" href="mailto:wangxianzhu@chromium.org">
|
||||
<link rel="match" href="overflow-clip-margin-011-ref.html">
|
||||
<style>
|
||||
.overflow-hidden {
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
overflow: hidden;
|
||||
}
|
||||
.parent {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
position: relative;
|
||||
top: 500px;
|
||||
overflow: clip;
|
||||
overflow-clip-margin: 500px;
|
||||
z-index: 1;
|
||||
background: red;
|
||||
}
|
||||
.child {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
position: relative;
|
||||
top: -500px;
|
||||
background: green;
|
||||
}
|
||||
</style>
|
||||
<div class="overflow-hidden">
|
||||
<div class="parent">
|
||||
<div class="child">
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -0,0 +1,35 @@
|
|||
<!doctype html>
|
||||
<meta charset="utf-8">
|
||||
<title>Overflow: verifies multi-col layout uses overflow-clip-margin correctly</title>
|
||||
<link rel="help" href="https://drafts.csswg.org/css-overflow/#overflow-clip-margin">
|
||||
<link rel="author" title="Khushal Sagar" href="mailto:khushalsagar@chromium.org">
|
||||
<style>
|
||||
body {
|
||||
width: 200px;
|
||||
height: 50px;
|
||||
column-count: 2;
|
||||
}
|
||||
|
||||
.container {
|
||||
overflow: clip;
|
||||
}
|
||||
.wrapper {
|
||||
height: 50px;
|
||||
border: 5px solid grey;
|
||||
padding: 5px;
|
||||
}
|
||||
|
||||
.content {
|
||||
position: relative;
|
||||
top: -20px;
|
||||
left: -20px;
|
||||
width: 100px;
|
||||
height: 50px;
|
||||
}
|
||||
</style>
|
||||
<div class="container">
|
||||
<div class="wrapper">
|
||||
<div class="content" style="background:blue"></div>
|
||||
<div class="content" style="background:green"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -0,0 +1,33 @@
|
|||
<!doctype html>
|
||||
<meta charset="utf-8">
|
||||
<title>Overflow: verifies multi-col layout uses overflow-clip-margin correctly</title>
|
||||
<link rel="help" href="https://drafts.csswg.org/css-overflow/#overflow-clip-margin">
|
||||
<link rel="author" title="Khushal Sagar" href="mailto:khushalsagar@chromium.org">
|
||||
<link rel="match" href="overflow-clip-margin-mul-column-border-box-ref.html">
|
||||
<style>
|
||||
body {
|
||||
width: 200px;
|
||||
height: 50px;
|
||||
column-count: 2;
|
||||
}
|
||||
|
||||
.container {
|
||||
height: 50px;
|
||||
border: 5px solid grey;
|
||||
padding: 5px;
|
||||
overflow: clip;
|
||||
overflow-clip-margin: border-box;
|
||||
}
|
||||
|
||||
.content {
|
||||
position: relative;
|
||||
top: -20px;
|
||||
left: -20px;
|
||||
width: 100px;
|
||||
height: 50px;
|
||||
}
|
||||
</style>
|
||||
<div class="container">
|
||||
<div class="content" style="background:blue"></div>
|
||||
<div class="content" style="background:green"></div>
|
||||
</div>
|
||||
|
|
@ -0,0 +1,36 @@
|
|||
<!doctype html>
|
||||
<meta charset="utf-8">
|
||||
<title>Overflow: verifies multi-col layout uses overflow-clip-margin correctly</title>
|
||||
<link rel="help" href="https://drafts.csswg.org/css-overflow/#overflow-clip-margin">
|
||||
<link rel="author" title="Khushal Sagar" href="mailto:khushalsagar@chromium.org">
|
||||
<style>
|
||||
body {
|
||||
width: 200px;
|
||||
height: 50px;
|
||||
column-count: 2;
|
||||
}
|
||||
|
||||
.container {
|
||||
height: 50px;
|
||||
border: 5px solid grey;
|
||||
padding: 5px;
|
||||
}
|
||||
.wrapper {
|
||||
height: 50px;
|
||||
overflow: clip;
|
||||
}
|
||||
|
||||
.content {
|
||||
position: relative;
|
||||
top: -20px;
|
||||
left: -20px;
|
||||
width: 100px;
|
||||
height: 50px;
|
||||
}
|
||||
</style>
|
||||
<div class="container">
|
||||
<div class="wrapper">
|
||||
<div class="content" style="background:blue"></div>
|
||||
<div class="content" style="background:green"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -0,0 +1,33 @@
|
|||
<!doctype html>
|
||||
<meta charset="utf-8">
|
||||
<title>Overflow: verifies multi-col layout uses overflow-clip-margin correctly</title>
|
||||
<link rel="help" href="https://drafts.csswg.org/css-overflow/#overflow-clip-margin">
|
||||
<link rel="author" title="Khushal Sagar" href="mailto:khushalsagar@chromium.org">
|
||||
<link rel="match" href="overflow-clip-margin-mul-column-content-box-ref.html">
|
||||
<style>
|
||||
body {
|
||||
width: 200px;
|
||||
height: 50px;
|
||||
column-count: 2;
|
||||
}
|
||||
|
||||
.container {
|
||||
height: 50px;
|
||||
border: 5px solid grey;
|
||||
padding: 5px;
|
||||
overflow: clip;
|
||||
overflow-clip-margin: content-box;
|
||||
}
|
||||
|
||||
.content {
|
||||
position: relative;
|
||||
top: -20px;
|
||||
left: -20px;
|
||||
width: 100px;
|
||||
height: 50px;
|
||||
}
|
||||
</style>
|
||||
<div class="container">
|
||||
<div class="content" style="background:blue"></div>
|
||||
<div class="content" style="background:green"></div>
|
||||
</div>
|
||||
|
|
@ -0,0 +1,31 @@
|
|||
<!doctype html>
|
||||
<meta charset="utf-8">
|
||||
<title>Overflow: verifies multi-col layout uses overflow-clip-margin correctly</title>
|
||||
<link rel="help" href="https://drafts.csswg.org/css-overflow/#overflow-clip-margin">
|
||||
<link rel="author" title="Khushal Sagar" href="mailto:khushalsagar@chromium.org">
|
||||
<style>
|
||||
body {
|
||||
width: 200px;
|
||||
height: 50px;
|
||||
column-count: 2;
|
||||
}
|
||||
|
||||
.container {
|
||||
height: 50px;
|
||||
border: 5px solid grey;
|
||||
padding: 5px;
|
||||
overflow: clip;
|
||||
}
|
||||
|
||||
.content {
|
||||
position: relative;
|
||||
top: -20px;
|
||||
left: -20px;
|
||||
width: 100px;
|
||||
height: 50px;
|
||||
}
|
||||
</style>
|
||||
<div class="container">
|
||||
<div class="content" style="background:blue"></div>
|
||||
<div class="content" style="background:green"></div>
|
||||
</div>
|
||||
|
|
@ -0,0 +1,33 @@
|
|||
<!doctype html>
|
||||
<meta charset="utf-8">
|
||||
<title>Overflow: verifies multi-col layout uses overflow-clip-margin correctly</title>
|
||||
<link rel="help" href="https://drafts.csswg.org/css-overflow/#overflow-clip-margin">
|
||||
<link rel="author" title="Khushal Sagar" href="mailto:khushalsagar@chromium.org">
|
||||
<link rel="match" href="overflow-clip-margin-mul-column-padding-box-ref.html">
|
||||
<style>
|
||||
body {
|
||||
width: 200px;
|
||||
height: 50px;
|
||||
column-count: 2;
|
||||
}
|
||||
|
||||
.container {
|
||||
height: 50px;
|
||||
border: 5px solid grey;
|
||||
padding: 5px;
|
||||
overflow: clip;
|
||||
overflow-clip-margin: padding-box;
|
||||
}
|
||||
|
||||
.content {
|
||||
position: relative;
|
||||
top: -20px;
|
||||
left: -20px;
|
||||
width: 100px;
|
||||
height: 50px;
|
||||
}
|
||||
</style>
|
||||
<div class="container">
|
||||
<div class="content" style="background:blue"></div>
|
||||
<div class="content" style="background:green"></div>
|
||||
</div>
|
||||
|
|
@ -0,0 +1,13 @@
|
|||
<!doctype html>
|
||||
<meta charset="utf-8">
|
||||
<title>overflow-clip-margin applies to svg</title>
|
||||
<link rel="help" href="https://www.w3.org/TR/css-overflow-3/#valdef-overflow-clip">
|
||||
<link rel="author" title="Khushal Sagar" href="mailto:khushalsagar@chromium.org">
|
||||
<style>
|
||||
div {
|
||||
width: 110px;
|
||||
height: 110px;
|
||||
background: green;
|
||||
}
|
||||
</style>
|
||||
<div></div>
|
||||
|
|
@ -0,0 +1,16 @@
|
|||
<!doctype html>
|
||||
<meta charset="utf-8">
|
||||
<title>overflow-clip-margin applies to svg</title>
|
||||
<link rel="help" href="https://www.w3.org/TR/css-overflow-3/#valdef-overflow-clip">
|
||||
<link rel="author" title="Khushal Sagar" href="mailto:khushalsagar@chromium.org">
|
||||
<link rel="match" href="overflow-clip-margin-svg-ref.html">
|
||||
<style>
|
||||
svg {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
overflow-clip-margin: 10px;
|
||||
}
|
||||
</style>
|
||||
<svg>
|
||||
<rect width="150" height="150" fill="green"></rect>
|
||||
</svg>
|
||||
|
|
@ -0,0 +1,52 @@
|
|||
<!doctype html>
|
||||
<meta charset="utf-8">
|
||||
<title>Verifies overflow-clip-margin supports visual-box</title>
|
||||
<link rel="help" href="https://www.w3.org/TR/css-overflow-3/#propdef-overflow-clip-margin">
|
||||
<link rel="author" title="Khushal Sagar" href="mailto:khushalsagar@chromium.org">
|
||||
<style>
|
||||
.container {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
overflow: visible;
|
||||
padding: 10px;
|
||||
border: 10px solid black;
|
||||
margin: 10px;
|
||||
background: grey;
|
||||
}
|
||||
|
||||
.inner_border_box {
|
||||
width: 150px;
|
||||
height: 150px;
|
||||
position: relative;
|
||||
top: -25px;
|
||||
left: -25px;
|
||||
background: blue;
|
||||
}
|
||||
|
||||
.inner_padding_box {
|
||||
width: 130px;
|
||||
height: 130px;
|
||||
position: relative;
|
||||
top: -15px;
|
||||
left: -15px;
|
||||
background: blue;
|
||||
}
|
||||
|
||||
.inner_content_box {
|
||||
width: 110px;
|
||||
height: 110px;
|
||||
position: relative;
|
||||
top: -5px;
|
||||
left: -5px;
|
||||
background: blue;
|
||||
}
|
||||
</style>
|
||||
<div class="container">
|
||||
<div class="inner_border_box"></div>
|
||||
</div>
|
||||
<div class="container">
|
||||
<div class="inner_padding_box"></div>
|
||||
</div>
|
||||
<div class="container">
|
||||
<div class="inner_content_box"></div>
|
||||
</div>
|
||||
|
|
@ -0,0 +1,56 @@
|
|||
<!doctype html>
|
||||
<meta charset="utf-8">
|
||||
<title>Verifies overflow-clip-margin supports visual-box</title>
|
||||
<link rel="help" href="https://www.w3.org/TR/css-overflow-3/#propdef-overflow-clip-margin">
|
||||
<link rel="author" title="Khushal Sagar" href="mailto:khushalsagar@chromium.org">
|
||||
<style>
|
||||
.container {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
overflow: visible;
|
||||
padding: 10px;
|
||||
border: 10px solid black;
|
||||
margin: 10px;
|
||||
border-radius: 0px 15px 25px 35px;
|
||||
background: grey;
|
||||
}
|
||||
|
||||
.inner_border_box {
|
||||
width: 150px;
|
||||
height: 150px;
|
||||
position: relative;
|
||||
top: -25px;
|
||||
left: -25px;
|
||||
background: blue;
|
||||
border-radius: 0px 15.55px 30px 40px;
|
||||
}
|
||||
|
||||
.inner_padding_box {
|
||||
width: 130px;
|
||||
height: 130px;
|
||||
position: relative;
|
||||
top: -15px;
|
||||
left: -15px;
|
||||
background: blue;
|
||||
border-radius: 0px 10px 20px 30px;
|
||||
}
|
||||
|
||||
.inner_content_box {
|
||||
width: 110px;
|
||||
height: 110px;
|
||||
position: relative;
|
||||
top: -5px;
|
||||
left: -5px;
|
||||
background: blue;
|
||||
border-radius: 0px 0px 10px 20px;
|
||||
}
|
||||
</style>
|
||||
<div class="container">
|
||||
<div class="inner_border_box"></div>
|
||||
</div>
|
||||
<div class="container">
|
||||
<div class="inner_padding_box"></div>
|
||||
</div>
|
||||
<div class="container">
|
||||
<div class="inner_content_box"></div>
|
||||
</div>
|
||||
|
|
@ -0,0 +1,37 @@
|
|||
<!doctype html>
|
||||
<meta charset="utf-8">
|
||||
<title>Verifies overflow-clip-margin supports visual-box</title>
|
||||
<link rel="help" href="https://www.w3.org/TR/css-overflow-3/#propdef-overflow-clip-margin">
|
||||
<link rel="author" title="Khushal Sagar" href="mailto:khushalsagar@chromium.org">
|
||||
<link rel="match" href="overflow-clip-margin-visual-box-and-value-with-border-radius-ref.html">
|
||||
<meta name="fuzzy" content="maxDifference=0-5; totalPixels=0-100" />
|
||||
<style>
|
||||
.container {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
overflow: clip;
|
||||
padding: 10px;
|
||||
border: 10px solid black;
|
||||
border-radius: 0px 15px 25px 35px;
|
||||
margin: 10px;
|
||||
background: grey;
|
||||
}
|
||||
|
||||
.inner {
|
||||
width: 150px;
|
||||
height: 150px;
|
||||
position: relative;
|
||||
top: -25px;
|
||||
left: -25px;
|
||||
background: blue;
|
||||
}
|
||||
</style>
|
||||
<div class="container" style="overflow-clip-margin: border-box 5px;">
|
||||
<div class="inner"></div>
|
||||
</div>
|
||||
<div class="container" style="overflow-clip-margin: padding-box 5px;">
|
||||
<div class="inner"></div>
|
||||
</div>
|
||||
<div class="container" style="overflow-clip-margin: content-box 5px;">
|
||||
<div class="inner"></div>
|
||||
</div>
|
||||
|
|
@ -0,0 +1,35 @@
|
|||
<!doctype html>
|
||||
<meta charset="utf-8">
|
||||
<title>Verifies overflow-clip-margin supports visual-box</title>
|
||||
<link rel="help" href="https://www.w3.org/TR/css-overflow-3/#propdef-overflow-clip-margin">
|
||||
<link rel="author" title="Khushal Sagar" href="mailto:khushalsagar@chromium.org">
|
||||
<link rel="match" href="overflow-clip-margin-visual-box-and-value-ref.html">
|
||||
<style>
|
||||
.container {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
overflow: clip;
|
||||
padding: 10px;
|
||||
border: 10px solid black;
|
||||
margin: 10px;
|
||||
background: grey;
|
||||
}
|
||||
|
||||
.inner {
|
||||
width: 150px;
|
||||
height: 150px;
|
||||
position: relative;
|
||||
top: -25px;
|
||||
left: -25px;
|
||||
background: blue;
|
||||
}
|
||||
</style>
|
||||
<div class="container" style="overflow-clip-margin: border-box 5px">
|
||||
<div class="inner"></div>
|
||||
</div>
|
||||
<div class="container" style="overflow-clip-margin: padding-box 5px;">
|
||||
<div class="inner"></div>
|
||||
</div>
|
||||
<div class="container" style="overflow-clip-margin: content-box 5px;">
|
||||
<div class="inner"></div>
|
||||
</div>
|
||||
|
|
@ -0,0 +1,49 @@
|
|||
<!doctype html>
|
||||
<meta charset="utf-8">
|
||||
<title>Verifies overflow-clip-margin supports visual-box</title>
|
||||
<link rel="help" href="https://www.w3.org/TR/css-overflow-3/#propdef-overflow-clip-margin">
|
||||
<link rel="author" title="Khushal Sagar" href="mailto:khushalsagar@chromium.org">
|
||||
<style>
|
||||
.container {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
overflow: visible;
|
||||
padding: 10px;
|
||||
border: 10px solid black;
|
||||
margin: 10px;
|
||||
background: grey;
|
||||
}
|
||||
|
||||
.inner_border_box {
|
||||
width: 140px;
|
||||
height: 140px;
|
||||
position: relative;
|
||||
top: -20px;
|
||||
left: -20px;
|
||||
background: blue;
|
||||
}
|
||||
|
||||
.inner_padding_box {
|
||||
width: 120px;
|
||||
height: 120px;
|
||||
position: relative;
|
||||
top: -10px;
|
||||
left: -10px;
|
||||
background: blue;
|
||||
}
|
||||
|
||||
.inner_content_box {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
background: blue;
|
||||
}
|
||||
</style>
|
||||
<div class="container">
|
||||
<div class="inner_border_box"></div>
|
||||
</div>
|
||||
<div class="container">
|
||||
<div class="inner_padding_box"></div>
|
||||
</div>
|
||||
<div class="container">
|
||||
<div class="inner_content_box"></div>
|
||||
</div>
|
||||
|
|
@ -0,0 +1,35 @@
|
|||
<!doctype html>
|
||||
<meta charset="utf-8">
|
||||
<title>Verifies overflow-clip-margin supports visual-box</title>
|
||||
<link rel="help" href="https://www.w3.org/TR/css-overflow-3/#propdef-overflow-clip-margin">
|
||||
<link rel="author" title="Khushal Sagar" href="mailto:khushalsagar@chromium.org">
|
||||
<link rel="match" href="overflow-clip-margin-visual-box-ref.html">
|
||||
<style>
|
||||
.container {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
overflow: clip;
|
||||
padding: 10px;
|
||||
border: 10px solid black;
|
||||
margin: 10px;
|
||||
background: grey;
|
||||
}
|
||||
|
||||
.inner {
|
||||
width: 150px;
|
||||
height: 150px;
|
||||
position: relative;
|
||||
top: -25px;
|
||||
left: -25px;
|
||||
background: blue;
|
||||
}
|
||||
</style>
|
||||
<div class="container" style="overflow-clip-margin: border-box">
|
||||
<div class="inner"></div>
|
||||
</div>
|
||||
<div class="container" style="overflow-clip-margin: padding-box;">
|
||||
<div class="inner"></div>
|
||||
</div>
|
||||
<div class="container" style="overflow-clip-margin: content-box;">
|
||||
<div class="inner"></div>
|
||||
</div>
|
||||
|
|
@ -0,0 +1,13 @@
|
|||
<!doctype html>
|
||||
<meta charset="utf-8">
|
||||
<title>Overflow: can have different clip and visible value in x/y directions with svg</title>
|
||||
<link rel="help" href="https://www.w3.org/TR/css-overflow-3/#valdef-overflow-clip">
|
||||
<link rel="author" title="Khushal Sagar" href="mailto:khushalsagar@chromium.org">
|
||||
<style>
|
||||
div {
|
||||
width: 100px;
|
||||
height: 150px;
|
||||
background: green;
|
||||
}
|
||||
</style>
|
||||
<div></div>
|
||||
|
|
@ -0,0 +1,17 @@
|
|||
<!doctype html>
|
||||
<meta charset="utf-8">
|
||||
<title>Overflow: can have different clip and visible value in x/y directions with svg</title>
|
||||
<link rel="help" href="https://www.w3.org/TR/css-overflow-3/#valdef-overflow-clip">
|
||||
<link rel="author" title="Khushal Sagar" href="mailto:khushalsagar@chromium.org">
|
||||
<link rel="match" href="overflow-clip-x-visible-y-svg-ref.html">
|
||||
<style>
|
||||
svg {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
overflow-y: visible;
|
||||
overflow-x: clip;
|
||||
}
|
||||
</style>
|
||||
<svg>
|
||||
<rect width="150" height="150" fill="green"></rect>
|
||||
</svg>
|
||||
|
|
@ -0,0 +1,13 @@
|
|||
<!doctype html>
|
||||
<meta charset="utf-8">
|
||||
<title>Overflow: can have different clip and visible value in x/y directions with svg</title>
|
||||
<link rel="help" href="https://www.w3.org/TR/css-overflow-3/#valdef-overflow-clip">
|
||||
<link rel="author" title="Khushal Sagar" href="mailto:khushalsagar@chromium.org">
|
||||
<style>
|
||||
div {
|
||||
width: 150px;
|
||||
height: 100px;
|
||||
background: green;
|
||||
}
|
||||
</style>
|
||||
<div></div>
|
||||
|
|
@ -0,0 +1,17 @@
|
|||
<!doctype html>
|
||||
<meta charset="utf-8">
|
||||
<title>Overflow: can have different clip and visible value in x/y directions with svg</title>
|
||||
<link rel="help" href="https://www.w3.org/TR/css-overflow-3/#valdef-overflow-clip">
|
||||
<link rel="author" title="Khushal Sagar" href="mailto:khushalsagar@chromium.org">
|
||||
<link rel="match" href="overflow-clip-y-visible-x-svg-ref.html">
|
||||
<style>
|
||||
svg {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
overflow-x: visible;
|
||||
overflow-y: clip;
|
||||
}
|
||||
</style>
|
||||
<svg>
|
||||
<rect width="150" height="150" fill="green"></rect>
|
||||
</svg>
|
||||
|
|
@ -0,0 +1,19 @@
|
|||
<!doctype html>
|
||||
<meta charset="utf-8">
|
||||
<title>Verifies overflow:visible doesn't clip using border-radius</title>
|
||||
<link rel="help" href="https://drafts.csswg.org/css-overflow/#propdef-overflow">
|
||||
<link rel="author" title="Khushal Sagar" href="mailto:khushalsagar@chromium.org">
|
||||
<link rel="match" href="overflow-img-ref.html">
|
||||
<style>
|
||||
.default {
|
||||
width: 25px;
|
||||
height: 50px;
|
||||
object-fit: none;
|
||||
overflow: visible;
|
||||
border-radius: 50%;
|
||||
object-position: 0% 0%;
|
||||
}
|
||||
</style>
|
||||
<body>
|
||||
<img class=default src="../css-images/support/exif-orientation-6-ru.jpg"></img>
|
||||
</body>
|
||||
|
|
@ -0,0 +1,19 @@
|
|||
<!doctype html>
|
||||
<meta charset="utf-8">
|
||||
<title>Verifies img elements are clipped with display:table</title>
|
||||
<link rel="help" href="https://drafts.csswg.org/css-overflow/#propdef-overflow">
|
||||
<link rel="author" title="Khushal Sagar" href="mailto:khushalsagar@chromium.org">
|
||||
<style>
|
||||
.default {
|
||||
width: 25px;
|
||||
height: 50px;
|
||||
border-radius: 2px;
|
||||
overflow: clip;
|
||||
border-radius: 2px;
|
||||
}
|
||||
</style>
|
||||
<body>
|
||||
<div class="default">
|
||||
<img src="../css-images/support/exif-orientation-6-ru.jpg"></img>
|
||||
</div>
|
||||
</body>
|
||||
|
|
@ -0,0 +1,19 @@
|
|||
<!doctype html>
|
||||
<meta charset="utf-8">
|
||||
<title>Verifies img elements are clipped with display:table</title>
|
||||
<link rel="help" href="https://drafts.csswg.org/css-overflow/#propdef-overflow">
|
||||
<link rel="author" title="Khushal Sagar" href="mailto:khushalsagar@chromium.org">
|
||||
<link rel="match" href="overflow-img-display-table-ref.html">
|
||||
<style>
|
||||
.default {
|
||||
width: 25px;
|
||||
height: 50px;
|
||||
object-fit: none;
|
||||
object-position: 0% 0%;
|
||||
border-radius: 2px;
|
||||
display: table;
|
||||
}
|
||||
</style>
|
||||
<body>
|
||||
<img class=default src="../css-images/support/exif-orientation-6-ru.jpg"></img>
|
||||
</body>
|
||||
|
|
@ -0,0 +1,16 @@
|
|||
<!doctype html>
|
||||
<meta charset="utf-8">
|
||||
<title>Verifies overflow applies to img elements</title>
|
||||
<link rel="help" href="https://drafts.csswg.org/css-overflow/#propdef-overflow">
|
||||
<link rel="author" title="Khushal Sagar" href="mailto:khushalsagar@chromium.org">
|
||||
<style>
|
||||
img {
|
||||
position: relative;
|
||||
top: 50px;
|
||||
left: 25px;
|
||||
}
|
||||
</style>
|
||||
<body>
|
||||
<img src="../css-images/support/exif-orientation-6-ru.jpg"></img>
|
||||
</body>
|
||||
|
||||
|
|
@ -0,0 +1,16 @@
|
|||
<!doctype html>
|
||||
<meta charset="utf-8">
|
||||
<title>Verifies overflow applies to img elements with object-position</title>
|
||||
<link rel="help" href="https://drafts.csswg.org/css-overflow/#propdef-overflow">
|
||||
<link rel="author" title="Khushal Sagar" href="mailto:khushalsagar@chromium.org">
|
||||
<link rel="match" href="overflow-img-object-position-ref.html">
|
||||
<style>
|
||||
.default {
|
||||
object-fit: none;
|
||||
overflow: visible;
|
||||
object-position: 25px 50px;
|
||||
}
|
||||
</style>
|
||||
<body>
|
||||
<img class=default src="../css-images/support/exif-orientation-6-ru.jpg"></img>
|
||||
</body>
|
||||
|
|
@ -0,0 +1,9 @@
|
|||
<!doctype html>
|
||||
<meta charset="utf-8">
|
||||
<title>Verifies overflow applies to img elements</title>
|
||||
<link rel="help" href="https://drafts.csswg.org/css-overflow/#propdef-overflow">
|
||||
<link rel="author" title="Khushal Sagar" href="mailto:khushalsagar@chromium.org">
|
||||
<body>
|
||||
<img src="../css-images/support/exif-orientation-6-ru.jpg"></img>
|
||||
</body>
|
||||
|
||||
|
|
@ -0,0 +1,20 @@
|
|||
<!doctype html>
|
||||
<meta charset="utf-8">
|
||||
<title>Verifies overflow allows scrolling when rendering alt test for img elements</title>
|
||||
<link rel="help" href="https://drafts.csswg.org/css-overflow/#propdef-overflow">
|
||||
<link rel="author" title="Khushal Sagar" href="mailto:khushalsagar@chromium.org">
|
||||
<style>
|
||||
div {
|
||||
border: solid;
|
||||
display: block;
|
||||
width: 150px;
|
||||
padding: 10px;
|
||||
overflow: scroll;
|
||||
}
|
||||
</style>
|
||||
<body>
|
||||
<div>
|
||||
<img src="about:invalid" alt="I have "></img>
|
||||
scrollbar ................................................................
|
||||
</div>
|
||||
</body>
|
||||
|
|
@ -0,0 +1,18 @@
|
|||
<!doctype html>
|
||||
<meta charset="utf-8">
|
||||
<title>Verifies overflow allows scrolling when rendering alt test for img elements</title>
|
||||
<link rel="help" href="https://drafts.csswg.org/css-overflow/#propdef-overflow">
|
||||
<link rel="author" title="Khushal Sagar" href="mailto:khushalsagar@chromium.org">
|
||||
<link rel="match" href="overflow-img-scroll-non-replaced-ref.html">
|
||||
<style>
|
||||
img {
|
||||
border: solid;
|
||||
display: block;
|
||||
width: 150px;
|
||||
padding: 10px;
|
||||
overflow: scroll;
|
||||
}
|
||||
</style>
|
||||
<body>
|
||||
<img src="about:invalid" alt="I have scrollbar ................................................................"></img>
|
||||
</body>
|
||||
|
|
@ -0,0 +1,18 @@
|
|||
<!doctype html>
|
||||
<meta charset="utf-8">
|
||||
<title>Verifies overflow:scroll on a replaced element clips to content box but doesn't generate scrollbars</title>
|
||||
<link rel="help" href="https://drafts.csswg.org/css-overflow/#propdef-overflow">
|
||||
<link rel="author" title="Khushal Sagar" href="mailto:khushalsagar@chromium.org">
|
||||
<style>
|
||||
img {
|
||||
padding: 10px;
|
||||
background: grey;
|
||||
object-fit: none;
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
object-position: 0% 0%;
|
||||
}
|
||||
</style>
|
||||
<body>
|
||||
<img src="../css-images/support/exif-orientation-6-ru.jpg"></img>
|
||||
</body>
|
||||
|
|
@ -0,0 +1,20 @@
|
|||
<!doctype html>
|
||||
<meta charset="utf-8">
|
||||
<title>Verifies overflow:scroll on a replaced element clips to content box but doesn't generate scrollbars</title>
|
||||
<link rel="help" href="https://drafts.csswg.org/css-overflow/#propdef-overflow">
|
||||
<link rel="author" title="Khushal Sagar" href="mailto:khushalsagar@chromium.org">
|
||||
<link rel="match" href="overflow-img-scroll-replaced-ref.html">
|
||||
<style>
|
||||
img {
|
||||
padding: 10px;
|
||||
background: grey;
|
||||
object-fit: none;
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
object-position: 0% 0%;
|
||||
overflow: scroll;
|
||||
}
|
||||
</style>
|
||||
<body>
|
||||
<img src="../css-images/support/exif-orientation-6-ru.jpg"></img>
|
||||
</body>
|
||||
|
|
@ -0,0 +1,9 @@
|
|||
<!doctype html>
|
||||
<meta charset="utf-8">
|
||||
<title>Verifies overflow applies to img elements rendering svg</title>
|
||||
<link rel="help" href="https://drafts.csswg.org/css-overflow/#propdef-overflow">
|
||||
<link rel="author" title="Khushal Sagar" href="mailto:khushalsagar@chromium.org">
|
||||
<body>
|
||||
<img src="../css-images/support/blue-green-red-yellow-50x100.svg"></img>
|
||||
</body>
|
||||
|
||||
|
|
@ -0,0 +1,18 @@
|
|||
<!doctype html>
|
||||
<meta charset="utf-8">
|
||||
<title>Verifies overflow applies to img elements rendering svg</title>
|
||||
<link rel="help" href="https://drafts.csswg.org/css-overflow/#propdef-overflow">
|
||||
<link rel="author" title="Khushal Sagar" href="mailto:khushalsagar@chromium.org">
|
||||
<link rel="match" href="overflow-img-svg-ref.html">
|
||||
<style>
|
||||
.default {
|
||||
width: 25px;
|
||||
height: 50px;
|
||||
object-fit: none;
|
||||
object-position: 0% 0%;
|
||||
overflow: visible;
|
||||
}
|
||||
</style>
|
||||
<body>
|
||||
<img class=default src="../css-images/support/blue-green-red-yellow-50x100.svg"></img>
|
||||
</body>
|
||||
|
|
@ -0,0 +1,18 @@
|
|||
<!doctype html>
|
||||
<meta charset="utf-8">
|
||||
<title>Verifies overflow applies to img elements</title>
|
||||
<link rel="help" href="https://drafts.csswg.org/css-overflow/#propdef-overflow">
|
||||
<link rel="author" title="Khushal Sagar" href="mailto:khushalsagar@chromium.org">
|
||||
<link rel="match" href="overflow-img-ref.html">
|
||||
<style>
|
||||
.default {
|
||||
width: 25px;
|
||||
height: 50px;
|
||||
object-fit: none;
|
||||
object-position: 0% 0%;
|
||||
overflow: visible;
|
||||
}
|
||||
</style>
|
||||
<body>
|
||||
<img class=default src="../css-images/support/exif-orientation-6-ru.jpg"></img>
|
||||
</body>
|
||||
|
|
@ -49,8 +49,8 @@
|
|||
</style>
|
||||
<body onload="runTest()">
|
||||
<p><span style="background:green">green</span> blocks get scrollbars, <span style="background:yellow">yellow</span> do not.</p>
|
||||
<p>Block child gets only block padding.</p>
|
||||
<div class="container" data-scrollbar="v">
|
||||
<p>Block child gets block and inline padding.</p>
|
||||
<div class="container" data-scrollbar="hv">
|
||||
<div class="big"></div>
|
||||
</div>
|
||||
<div class="container" data-scrollbar="">
|
||||
|
|
|
|||
|
|
@ -0,0 +1,21 @@
|
|||
<!doctype html>
|
||||
<html class="reftest-wait">
|
||||
<meta charset="utf-8">
|
||||
<title>Verifies overflow applies to video elements</title>
|
||||
<link rel="help" href="https://drafts.csswg.org/css-overflow/#propdef-overflow">
|
||||
<link rel="author" title="Khushal Sagar" href="mailto:khushalsagar@chromium.org">
|
||||
<script src="/common/reftest-wait.js"></script>
|
||||
<style>
|
||||
body {
|
||||
background: grey;
|
||||
}
|
||||
</style>
|
||||
<video autoplay>
|
||||
<source src="/media/white.webm" type="video/webm">
|
||||
<source src="/media/white.mp4" type="video/mp4">
|
||||
</video>
|
||||
<script type="text/javascript">
|
||||
document.getElementsByTagName('video')[0].addEventListener('play', (event) => {
|
||||
takeScreenshot();
|
||||
});
|
||||
</script>
|
||||
|
|
@ -0,0 +1,29 @@
|
|||
<!doctype html>
|
||||
<html class="reftest-wait">
|
||||
<meta charset="utf-8">
|
||||
<title>Verifies overflow applies to video elements</title>
|
||||
<link rel="help" href="https://drafts.csswg.org/css-overflow/#propdef-overflow">
|
||||
<link rel="author" title="Khushal Sagar" href="mailto:khushalsagar@chromium.org">
|
||||
<link rel="match" href="overflow-video-ref.html">
|
||||
<script src="/common/reftest-wait.js"></script>
|
||||
<style>
|
||||
body {
|
||||
background: grey;
|
||||
}
|
||||
.default {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
object-fit: none;
|
||||
object-position: 0% 0%;
|
||||
overflow: visible;
|
||||
}
|
||||
</style>
|
||||
<video autoplay class="default">
|
||||
<source src="/media/white.webm" type="video/webm">
|
||||
<source src="/media/white.mp4" type="video/mp4">
|
||||
</video>
|
||||
<script type="text/javascript">
|
||||
document.getElementsByTagName('video')[0].addEventListener('play', (event) => {
|
||||
takeScreenshot();
|
||||
});
|
||||
</script>
|
||||
|
|
@ -0,0 +1,13 @@
|
|||
<!doctype html>
|
||||
<meta charset="utf-8">
|
||||
<title>overflow-clip-margin applies to svg</title>
|
||||
<link rel="help" href="https://www.w3.org/TR/css-overflow-3/#valdef-overflow-clip">
|
||||
<link rel="author" title="Khushal Sagar" href="mailto:khushalsagar@chromium.org">
|
||||
<style>
|
||||
div {
|
||||
width: 110px;
|
||||
height: 110px;
|
||||
background: green;
|
||||
}
|
||||
</style>
|
||||
<div></div>
|
||||
|
|
@ -0,0 +1,18 @@
|
|||
<!doctype html>
|
||||
<meta charset="utf-8">
|
||||
<title>overflow-clip-margin applies to svg when paint containment is specified</title>
|
||||
<link rel="help" href="https://www.w3.org/TR/css-overflow-3/#valdef-overflow-clip">
|
||||
<link rel="author" title="Khushal Sagar" href="mailto:khushalsagar@chromium.org">
|
||||
<link rel="match" href="paint-containment-svg-ref.html">
|
||||
<style>
|
||||
svg {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
overflow: visible;
|
||||
contain: paint;
|
||||
overflow-clip-margin: 10px;
|
||||
}
|
||||
</style>
|
||||
<svg>
|
||||
<rect width="150" height="150" fill="green"></rect>
|
||||
</svg>
|
||||
|
|
@ -0,0 +1,33 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Overflow: getComputedStyle() for overflow-clip-margin</title>
|
||||
<link rel="help" href="https://drafts.csswg.org/css-overflow/#overflow-clip-margin">
|
||||
<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-clip-margin", "0px", "0px");
|
||||
test_computed_value("overflow-clip-margin", "10px");
|
||||
|
||||
test_computed_value("overflow-clip-margin", "content-box");
|
||||
test_computed_value("overflow-clip-margin", "content-box 0px", "content-box");
|
||||
test_computed_value("overflow-clip-margin", "content-box 10px");
|
||||
test_computed_value("overflow-clip-margin", "10px content-box", "content-box 10px");
|
||||
|
||||
test_computed_value("overflow-clip-margin", "padding-box", "0px");
|
||||
test_computed_value("overflow-clip-margin", "padding-box 0px", "0px");
|
||||
test_computed_value("overflow-clip-margin", "padding-box 10px", "10px");
|
||||
test_computed_value("overflow-clip-margin", "10px padding-box", "10px");
|
||||
|
||||
test_computed_value("overflow-clip-margin", "border-box");
|
||||
test_computed_value("overflow-clip-margin", "border-box 0px", "border-box");
|
||||
test_computed_value("overflow-clip-margin", "border-box 10px");
|
||||
test_computed_value("overflow-clip-margin", "10px border-box", "border-box 10px");
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,34 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Overflow: parsing overflow-clip-margin</title>
|
||||
<link rel="help" href="https://drafts.csswg.org/css-overflow/#overflow-clip-margin">
|
||||
<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-clip-margin", '10px', '10px');
|
||||
|
||||
test_valid_value("overflow-clip-margin", 'content-box', 'content-box');
|
||||
test_valid_value("overflow-clip-margin", 'content-box 10px', 'content-box 10px');
|
||||
test_valid_value("overflow-clip-margin", '10px content-box', 'content-box 10px');
|
||||
test_valid_value("overflow-clip-margin", '0px content-box', 'content-box');
|
||||
|
||||
test_valid_value("overflow-clip-margin", 'padding-box', '0px');
|
||||
test_valid_value("overflow-clip-margin", 'padding-box 0px', '0px');
|
||||
test_valid_value("overflow-clip-margin", 'padding-box 10px', '10px');
|
||||
test_valid_value("overflow-clip-margin", '10px padding-box', '10px');
|
||||
|
||||
test_valid_value("overflow-clip-margin", 'border-box', 'border-box');
|
||||
test_valid_value("overflow-clip-margin", 'border-box 0px', 'border-box');
|
||||
test_valid_value("overflow-clip-margin", 'border-box 10px', 'border-box 10px');
|
||||
test_valid_value("overflow-clip-margin", '10px border-box', 'border-box 10px');
|
||||
|
||||
test_invalid_value("overflow-clip-margin", 'margin-box');
|
||||
test_invalid_value("overflow-clip-margin", 'inset(10px)');
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,18 @@
|
|||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
|
||||
|
||||
<html xmlns="http://www.w3.org/1999/xhtml">
|
||||
|
||||
<head>
|
||||
|
||||
<title>CSS Reftest Reference</title>
|
||||
|
||||
<link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
|
||||
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<p>Test passes if there is <strong>no red</strong>.</p>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -3,8 +3,7 @@
|
|||
<title>CSS Reference</title>
|
||||
<style>
|
||||
.clamp {
|
||||
display: -webkit-box;
|
||||
-webkit-box-orient: vertical;
|
||||
display: block;
|
||||
font: 16px / 32px serif;
|
||||
white-space: pre;
|
||||
padding: 0 4px;
|
||||
|
|
@ -12,6 +11,8 @@
|
|||
}
|
||||
</style>
|
||||
<div class="clamp"><div>Line 1
|
||||
Line 2…</div><div>Line A
|
||||
Line B…</div>Line 一
|
||||
Line 2
|
||||
Line 3</div><div>Line A
|
||||
Line B
|
||||
Line C</div>Line 一
|
||||
Line 二…</div>
|
||||
|
|
|
|||
|
|
@ -3,8 +3,8 @@
|
|||
<title>CSS Reference</title>
|
||||
<style>
|
||||
.clamp {
|
||||
display: -webkit-inline-box;
|
||||
-webkit-box-orient: vertical;
|
||||
display: inline-block;
|
||||
overflow: hidden;
|
||||
font: 16px / 32px monospace;
|
||||
white-space: pre;
|
||||
padding: 0 4px;
|
||||
|
|
|
|||
|
|
@ -3,8 +3,7 @@
|
|||
<title>CSS Reference</title>
|
||||
<style>
|
||||
.clamp {
|
||||
display: -webkit-box;
|
||||
-webkit-box-orient: vertical;
|
||||
display: block;
|
||||
font: 16px / 32px monospace;
|
||||
white-space: pre;
|
||||
background-color: yellow;
|
||||
|
|
@ -15,5 +14,7 @@
|
|||
</style>
|
||||
<div class="clamp"><div class="child">Line 1
|
||||
Line 2
|
||||
Line 3…</div></div>
|
||||
Line 3
|
||||
Line 4
|
||||
Line 5</div></div>
|
||||
<p>Following content.</p>
|
||||
|
|
|
|||
|
|
@ -9,8 +9,7 @@
|
|||
}
|
||||
#clamp {
|
||||
font-family: Ahem;
|
||||
display: -webkit-box;
|
||||
-webkit-box-orient: vertical;
|
||||
display: block;
|
||||
overflow: hidden; /* can be removed once implementations update their old -webkit-line-clamp implementations */
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@
|
|||
.clamp {
|
||||
display: -webkit-box;
|
||||
-webkit-box-orient: vertical;
|
||||
width: 150px;
|
||||
width: 10ch;
|
||||
font: 16px / 32px monospace;
|
||||
background-color: yellow;
|
||||
padding: 4px;
|
||||
|
|
@ -13,5 +13,5 @@
|
|||
</style>
|
||||
<div class="clamp">
|
||||
supercalifragilisticexpialidocious
|
||||
supercalifragi…
|
||||
supercali…
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,16 @@
|
|||
<!doctype html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Test Reference</title>
|
||||
<style>
|
||||
.clamp {
|
||||
font: 16px / 32px serif;
|
||||
white-space: pre;
|
||||
background-color: yellow;
|
||||
height: 5em;
|
||||
}
|
||||
</style>
|
||||
<div class="clamp">Line 1
|
||||
Line 2…
|
||||
Line 3
|
||||
Line 4
|
||||
Line 5</div>
|
||||
|
|
@ -0,0 +1,17 @@
|
|||
<!DOCTYPE html>
|
||||
<style>
|
||||
.clamp {
|
||||
display: -webkit-inline-box;
|
||||
-webkit-box-orient: vertical;
|
||||
-webkit-line-clamp: 3;
|
||||
}
|
||||
</style>
|
||||
<body>
|
||||
<div class="clamp">
|
||||
1<br>
|
||||
2<br>
|
||||
<div>3</div>
|
||||
4<br>
|
||||
5
|
||||
</div>
|
||||
</body>
|
||||
|
|
@ -0,0 +1,107 @@
|
|||
<!doctype html>
|
||||
<meta charset=utf-8>
|
||||
<title>Resizer should not set the width/height properties when size doesn't change</title>
|
||||
<link rel=author href="mailto:emilio@crisal.io" title="Emilio Cobos Álvarez">
|
||||
<link rel=author href="https://mozilla.org" title="Mozilla">
|
||||
<link rel=help href="https://bugzilla.mozilla.org/show_bug.cgi?id=1795536">
|
||||
<style>
|
||||
body {
|
||||
margin: 0;
|
||||
}
|
||||
#resizeme {
|
||||
position: absolute;
|
||||
top: 100px;
|
||||
left: 100px;
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
overflow: hidden;
|
||||
resize: both;
|
||||
background-color: green;
|
||||
}
|
||||
#parent {
|
||||
background-color: purple;
|
||||
position: relative;
|
||||
}
|
||||
</style>
|
||||
<script src='/resources/testharness.js'></script>
|
||||
<script src='/resources/testharnessreport.js'></script>
|
||||
<script src="/resources/testdriver.js"></script>
|
||||
<script src="/resources/testdriver-actions.js"></script>
|
||||
<script src="/resources/testdriver-vendor.js"></script>
|
||||
<div id="parent" style="width: 400px; height: 400px">
|
||||
<div id="resizeme" style="width: 100px; height: 100px;"></div>
|
||||
</div>
|
||||
<script>
|
||||
function tick() {
|
||||
return new Promise(r => {
|
||||
requestAnimationFrame(() => requestAnimationFrame(r));
|
||||
});
|
||||
}
|
||||
|
||||
promise_test(async function test() {
|
||||
const element = document.getElementById("resizeme");
|
||||
|
||||
{
|
||||
// Set up the observer.
|
||||
const observer = new ResizeObserver(entries => {
|
||||
const rect = entries[0].contentRect;
|
||||
if (rect.width && rect.height) {
|
||||
const style = element.style;
|
||||
const { height, width } = style;
|
||||
const widthPercent = width.endsWith("%");
|
||||
const heightPercent = height.endsWith("%");
|
||||
if (widthPercent && heightPercent) {
|
||||
return;
|
||||
}
|
||||
|
||||
const parent = element.parentElement;
|
||||
const parentWidth = parseFloat(parent.style.width);
|
||||
const parentHeight = parseFloat(parent.style.height);
|
||||
if (!widthPercent) {
|
||||
style.width = `${(100 * parseFloat(width)) / parentWidth}%`;
|
||||
}
|
||||
if (!heightPercent) {
|
||||
style.height = `${(100 * parseFloat(height)) / parentHeight}%`;
|
||||
}
|
||||
}
|
||||
});
|
||||
observer.observe(element);
|
||||
}
|
||||
|
||||
{
|
||||
// Resize to the smallest horizontal dimension possible.
|
||||
const rect = element.getBoundingClientRect();
|
||||
|
||||
await new test_driver.Actions()
|
||||
.pointerMove(rect.right - 1, rect.bottom - 1)
|
||||
.pointerDown()
|
||||
.pointerMove(rect.left, rect.bottom - 1)
|
||||
.pointerUp()
|
||||
.send();
|
||||
}
|
||||
|
||||
await tick();
|
||||
|
||||
assert_true(element.style.width.endsWith("%"), "Width is in percent");
|
||||
assert_true(element.style.height.endsWith("%"), "Height is in percent");
|
||||
|
||||
const oldRect = element.getBoundingClientRect();
|
||||
{
|
||||
// Try to shrink again (we shouldn't be able to).
|
||||
await new test_driver.Actions()
|
||||
.pointerMove(oldRect.right - 1, oldRect.bottom - 1)
|
||||
.pointerDown()
|
||||
.pointerMove(oldRect.left, oldRect.bottom - 1)
|
||||
.pointerUp()
|
||||
.send();
|
||||
}
|
||||
|
||||
assert_true(element.style.width.endsWith("%"), "Width is still in percent");
|
||||
assert_true(element.style.height.endsWith("%"), "Height is still in percent");
|
||||
|
||||
await tick();
|
||||
|
||||
assert_true(element.style.width.endsWith("%"), "Width is still in percent");
|
||||
assert_true(element.style.height.endsWith("%"), "Height is still in percent");
|
||||
});
|
||||
</script>
|
||||
|
|
@ -0,0 +1,44 @@
|
|||
<!doctype html>
|
||||
<meta charset=utf-8>
|
||||
<title>Resizer should account for transforms to decide resize direction</title>
|
||||
<link rel=author href="mailto:emilio@crisal.io" title="Emilio Cobos Álvarez">
|
||||
<link rel=author href="https://mozilla.org" title="Mozilla">
|
||||
<link rel=help href="https://bugzilla.mozilla.org/show_bug.cgi?id=1775797">
|
||||
<style>
|
||||
#resizeme {
|
||||
position: absolute;
|
||||
top: 200px;
|
||||
left: 200px;
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
overflow: hidden;
|
||||
resize: both;
|
||||
background-color: green;
|
||||
transform-origin: 0 0;
|
||||
transform: rotate(90deg);
|
||||
}
|
||||
</style>
|
||||
<script src='/resources/testharness.js'></script>
|
||||
<script src='/resources/testharnessreport.js'></script>
|
||||
<script src="/resources/testdriver.js"></script>
|
||||
<script src="/resources/testdriver-actions.js"></script>
|
||||
<script src="/resources/testdriver-vendor.js"></script>
|
||||
<div id="resizeme"></div>
|
||||
<script>
|
||||
promise_test(async function test() {
|
||||
let element = document.getElementById("resizeme");
|
||||
let rect = element.getBoundingClientRect();
|
||||
|
||||
// Due to the rotation, the resizer should be at the bottom left.
|
||||
await new test_driver.Actions()
|
||||
.pointerMove(rect.left + 1, rect.bottom - 1)
|
||||
.pointerDown()
|
||||
.pointerMove(rect.left + 1, rect.bottom + 50)
|
||||
.pointerUp()
|
||||
.send();
|
||||
|
||||
// We should've made the element wider due to the rotation.
|
||||
assert_greater_than(parseInt(getComputedStyle(element).width, 10), 100, "Element should be wider");
|
||||
assert_equals(parseInt(getComputedStyle(element).height, 10), 100, "Element should have the same height");
|
||||
});
|
||||
</script>
|
||||
|
|
@ -0,0 +1,183 @@
|
|||
<!DOCTYPE html>
|
||||
<link rel="help" href="https://drafts.csswg.org/css-overflow-3/#scrollable">
|
||||
<link rel="help" href="https://github.com/w3c/csswg-drafts/issues/129">
|
||||
<style>
|
||||
scrollable-container {
|
||||
display: block;
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
overflow: scroll;
|
||||
padding: 10px 5px;
|
||||
line-height: 0;
|
||||
}
|
||||
|
||||
scrollable-container > div {
|
||||
position: relative;
|
||||
writing-mode: horizontal-tb;
|
||||
direction: ltr;
|
||||
outline: solid red 2px;
|
||||
}
|
||||
</style>
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<script src="/resources/check-layout-th.js"></script>
|
||||
<body onload="checkLayout('scrollable-container')">
|
||||
|
||||
<!--
|
||||
All of these tests have a child which contributes to the "alignment rectangle" ("infow-bounds" in Blink).
|
||||
However doesn't directly contribute to the scrollable-overflow as it is relative-positioned before the
|
||||
"scroll origin" edge(s).
|
||||
|
||||
All of these tests have an inline/block end margin (wrt. the parent writing-mode + direction).
|
||||
-->
|
||||
|
||||
<!-- HTB + LTR -->
|
||||
<div style="writing-mode: horizontal-tb; direction: ltr;">
|
||||
<scrollable-container data-expected-scroll-height="270">
|
||||
<div style="width: 0; height: 200px; margin-bottom: 50px; top: -1000px;"></div>
|
||||
</scrollable-container>
|
||||
|
||||
<scrollable-container data-expected-scroll-width="260">
|
||||
<div style="width: 200px; height: 0; margin-right: 50px; left: -1000px;"></div>
|
||||
</scrollable-container>
|
||||
|
||||
<scrollable-container data-expected-scroll-height="270">
|
||||
<div style="width: 0; height: 200px; margin-bottom: 50px; top: -1000px; display: inline-block;"></div>
|
||||
</scrollable-container>
|
||||
|
||||
<scrollable-container data-expected-scroll-width="260">
|
||||
<div style="width: 200px; height: 0; margin-right: 50px; left: -1000px; display: inline-block;"></div>
|
||||
</scrollable-container>
|
||||
|
||||
<!-- For this specific case collapsed-margins affect the size of the alignment rectangle. -->
|
||||
<scrollable-container data-expected-scroll-height="270">
|
||||
<div style="width: 0; margin-bottom: 100px; top: -1000px;">
|
||||
<div style="height: 200px; margin-bottom: -50px;"></div>
|
||||
</div>
|
||||
</scrollable-container>
|
||||
</div>
|
||||
|
||||
<!-- HTB + RTL -->
|
||||
<div style="writing-mode: horizontal-tb; direction: rtl;">
|
||||
<scrollable-container data-expected-scroll-height="270">
|
||||
<div style="width: 0; height: 200px; margin-bottom: 50px; top: -1000px;"></div>
|
||||
</scrollable-container>
|
||||
|
||||
<scrollable-container data-expected-scroll-width="260">
|
||||
<div style="width: 200px; height: 0; margin-left: 50px; right: -1000px;"></div>
|
||||
</scrollable-container>
|
||||
|
||||
<scrollable-container data-expected-scroll-height="270">
|
||||
<div style="width: 0; height: 200px; margin-bottom: 50px; top: -1000px; display: inline-block;"></div>
|
||||
</scrollable-container>
|
||||
|
||||
<scrollable-container data-expected-scroll-width="260">
|
||||
<div style="width: 200px; height: 0; margin-left: 50px; right: -1000px; display: inline-block;"></div>
|
||||
</scrollable-container>
|
||||
|
||||
<scrollable-container data-expected-scroll-height="270">
|
||||
<div style="width: 0; margin-bottom: 100px; top: -1000px;">
|
||||
<div style="height: 200px; margin-bottom: -50px;"></div>
|
||||
</div>
|
||||
</scrollable-container>
|
||||
</div>
|
||||
|
||||
<!-- VRL + LTR -->
|
||||
<div style="writing-mode: vertical-rl; direction: ltr;">
|
||||
<scrollable-container data-expected-scroll-width="260">
|
||||
<div style="width: 200px; height: 0; margin-left: 50px; right: -1000px;"></div>
|
||||
</scrollable-container>
|
||||
|
||||
<scrollable-container data-expected-scroll-height="270">
|
||||
<div style="width: 0; height: 200px; margin-bottom: 50px; top: -1000px;"></div>
|
||||
</scrollable-container>
|
||||
|
||||
<scrollable-container data-expected-scroll-width="260">
|
||||
<div style="width: 200px; height: 0; margin-left: 50px; right: -1000px; display: inline-block;"></div>
|
||||
</scrollable-container>
|
||||
|
||||
<scrollable-container data-expected-scroll-height="270">
|
||||
<div style="width: 0; height: 200px; margin-bottom: 50px; top: -1000px; display: inline-block;"></div>
|
||||
</scrollable-container>
|
||||
|
||||
<scrollable-container data-expected-scroll-width="260">
|
||||
<div style="height: 0; margin-left: 100px; right: -1000px;">
|
||||
<div style="width: 200px; margin-left: -50px;"></div>
|
||||
</div>
|
||||
</scrollable-container>
|
||||
</div>
|
||||
|
||||
<!-- VRL + RTL -->
|
||||
<div style="writing-mode: vertical-rl; direction: rtl;">
|
||||
<scrollable-container data-expected-scroll-width="260">
|
||||
<div style="width: 200px; height: 0; margin-left: 50px; right: -1000px;"></div>
|
||||
</scrollable-container>
|
||||
|
||||
<scrollable-container data-expected-scroll-height="270">
|
||||
<div style="width: 0; height: 200px; margin-top: 50px; bottom: -1000px;"></div>
|
||||
</scrollable-container>
|
||||
|
||||
<scrollable-container data-expected-scroll-width="260">
|
||||
<div style="width: 200px; height: 0; margin-left: 50px; right: -1000px; display: inline-block;"></div>
|
||||
</scrollable-container>
|
||||
|
||||
<scrollable-container data-expected-scroll-height="270">
|
||||
<div style="width: 0; height: 200px; margin-top: 50px; bottom: -1000px; display: inline-block;"></div>
|
||||
</scrollable-container>
|
||||
|
||||
<scrollable-container data-expected-scroll-width="260">
|
||||
<div style="height: 0; margin-left: 100px; right: -1000px;">
|
||||
<div style="width: 200px; margin-left: -50px;"></div>
|
||||
</div>
|
||||
</scrollable-container>
|
||||
</div>
|
||||
|
||||
<!-- VLR + LTR -->
|
||||
<div style="writing-mode: vertical-lr; direction: ltr;">
|
||||
<scrollable-container data-expected-scroll-width="260">
|
||||
<div style="width: 200px; height: 0; margin-right: 50px; left: -1000px;"></div>
|
||||
</scrollable-container>
|
||||
|
||||
<scrollable-container data-expected-scroll-height="270">
|
||||
<div style="width: 0; height: 200px; margin-bottom: 50px; top: -1000px;"></div>
|
||||
</scrollable-container>
|
||||
|
||||
<scrollable-container data-expected-scroll-width="260">
|
||||
<div style="width: 200px; height: 0; margin-right: 50px; left: -1000px; display: inline-block;"></div>
|
||||
</scrollable-container>
|
||||
|
||||
<scrollable-container data-expected-scroll-height="270">
|
||||
<div style="width: 0; height: 200px; margin-bottom: 50px; top: -1000px; display: inline-block;"></div>
|
||||
</scrollable-container>
|
||||
|
||||
<scrollable-container data-expected-scroll-width="260">
|
||||
<div style="height: 0; margin-right: 100px; left: -1000px;">
|
||||
<div style="width: 200px; margin-right: -50px;"></div>
|
||||
</div>
|
||||
</scrollable-container>
|
||||
</div>
|
||||
|
||||
<!-- VLR + RTL -->
|
||||
<div style="writing-mode: vertical-rl; direction: rtl;">
|
||||
<scrollable-container data-expected-scroll-width="260">
|
||||
<div style="width: 200px; height: 0; margin-right: 50px; left: -1000px;"></div>
|
||||
</scrollable-container>
|
||||
|
||||
<scrollable-container data-expected-scroll-height="270">
|
||||
<div style="width: 0; height: 200px; margin-top: 50px; bottom: -1000px;"></div>
|
||||
</scrollable-container>
|
||||
|
||||
<scrollable-container data-expected-scroll-width="260">
|
||||
<div style="width: 200px; height: 0; margin-right: 50px; left: -1000px; display: inline-block;"></div>
|
||||
</scrollable-container>
|
||||
|
||||
<scrollable-container data-expected-scroll-height="270">
|
||||
<div style="width: 0; height: 200px; margin-top: 50px; bottom: -1000px; display: inline-block;"></div>
|
||||
</scrollable-container>
|
||||
|
||||
<scrollable-container data-expected-scroll-width="260">
|
||||
<div style="height: 0; margin-right: 100px; left: -1000px;">
|
||||
<div style="width: 200px; margin-right: -50px;"></div>
|
||||
</div>
|
||||
</scrollable-container>
|
||||
</div>
|
||||
|
|
@ -0,0 +1,18 @@
|
|||
<!DOCTYPE html>
|
||||
<link rel="help" href="https://drafts.csswg.org/css-overflow/#scrollbar-layout">
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
|
||||
<div id="container" style="width:600px; height:400px; writing-mode:vertical-rl; overflow:auto;">
|
||||
<div id="target" style="width:1000px; height:500px; background:lime;"></div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
promise_test(async () => {
|
||||
await new Promise(resolve => requestAnimationFrame(resolve));
|
||||
await new Promise(resolve => requestAnimationFrame(resolve));
|
||||
// Remove the vertical scrollbar.
|
||||
document.querySelector('#target').style.height = '200px';
|
||||
assert_equals(document.querySelector('#container').scrollLeft, 0);
|
||||
}, 'Removing the vertical scrollbar of a vertical-rl container should keep scrollLeft');
|
||||
</script>
|
||||
|
|
@ -0,0 +1,19 @@
|
|||
<!doctype html>
|
||||
<title>CSS Overflow Reference: scrollbar-gutter is accounted for in abspos sizing</title>
|
||||
<style>
|
||||
.container {
|
||||
scrollbar-gutter: stable;
|
||||
overflow-y: auto;
|
||||
width: 100px;
|
||||
height: 200px;
|
||||
position: relative;
|
||||
}
|
||||
.child {
|
||||
width: 100%;
|
||||
height: 100px;
|
||||
background: green;
|
||||
}
|
||||
</style>
|
||||
<div class="container">
|
||||
<div class="child"></div>
|
||||
</div>
|
||||
|
|
@ -0,0 +1,25 @@
|
|||
<!doctype html>
|
||||
<title>CSS Overflow Test: scrollbar-gutter is accounted for in abspos sizing</title>
|
||||
<link rel="help" href="mailto:emilio@crisal.io" title="Emilio Cobos Álvarez">
|
||||
<link rel="help" href="https://mozilla.org" title="Mozilla">
|
||||
<link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1756826">
|
||||
<link rel="match" href="scrollbar-gutter-abspos-001-ref.html">
|
||||
<style>
|
||||
.container {
|
||||
scrollbar-gutter: stable;
|
||||
overflow-y: auto;
|
||||
width: 100px;
|
||||
height: 200px;
|
||||
position: relative;
|
||||
}
|
||||
.abspos {
|
||||
width: 100%;
|
||||
height: 100px;
|
||||
background: green;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
}
|
||||
</style>
|
||||
<div class="container">
|
||||
<div class="abspos"></div>
|
||||
</div>
|
||||
|
|
@ -0,0 +1,30 @@
|
|||
<!DOCTYPE html>
|
||||
<style>
|
||||
.container {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.cell {
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
border: 1px solid red;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
span {
|
||||
display: inline-block;
|
||||
background: green;
|
||||
width: 30px;
|
||||
height: 1em;
|
||||
padding: 4px;
|
||||
margin: 5px;
|
||||
}
|
||||
</style>
|
||||
<div id="target" class="container" style="width: 150px;">
|
||||
<div class="cell">
|
||||
<span></span><span></span><span></span><span></span>
|
||||
</div>
|
||||
<div class="cell">
|
||||
<span></span><span></span><span></span><span></span>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -0,0 +1,44 @@
|
|||
<!DOCTYPE html>
|
||||
<html class=reftest-wait>
|
||||
<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=1062733">
|
||||
<link rel="match" href="text-overflow-ellipsis-003-ref.html">
|
||||
<script src="/common/reftest-wait.js"></script>
|
||||
<style>
|
||||
.container {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.cell {
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
border: 1px solid red;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
span {
|
||||
display: inline-block;
|
||||
background: green;
|
||||
width: 30px;
|
||||
height: 1em;
|
||||
padding: 4px;
|
||||
margin: 5px;
|
||||
}
|
||||
</style>
|
||||
<div id="target" class="container" style="width: 200px;">
|
||||
<div class="cell">
|
||||
<span></span><span></span><span></span><span></span>
|
||||
</div>
|
||||
<div class="cell">
|
||||
<span></span><span></span><span></span><span></span>
|
||||
</div>
|
||||
</div>
|
||||
<script>
|
||||
async function runTest() {
|
||||
await new Promise(requestAnimationFrame);
|
||||
document.getElementById('target').style.width = '150px';
|
||||
|
||||
await new Promise(requestAnimationFrame);
|
||||
takeScreenshot();
|
||||
}
|
||||
requestAnimationFrame(() => { requestAnimationFrame(() => runTest()) });
|
||||
</script>
|
||||
|
|
@ -25,10 +25,10 @@ Line 4
|
|||
Line 5</div>
|
||||
<p>Following content.</p>
|
||||
<script>
|
||||
window.onload = function() {
|
||||
requestAnimationFrame(() => requestAnimationFrame(() => {
|
||||
document.querySelector(".clamp").textContent = `Line 1
|
||||
Line 2
|
||||
Line 3`;
|
||||
document.documentElement.className = "";
|
||||
};
|
||||
}));
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -8,7 +8,7 @@
|
|||
display: -webkit-box;
|
||||
-webkit-box-orient: vertical;
|
||||
-webkit-line-clamp: 2;
|
||||
width: 150px;
|
||||
width: 10ch;
|
||||
font: 16px / 32px monospace;
|
||||
background-color: yellow;
|
||||
padding: 4px;
|
||||
|
|
|
|||
|
|
@ -0,0 +1,23 @@
|
|||
<!doctype html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Overflow: line-clamp with explicit height</title>
|
||||
<link rel="author" title="Emilio Cobos Álvarez" href="mailto:emilio@crisal.io">
|
||||
<link rel="author" title="Mozilla" href="https://mozilla.org">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-overflow-3/#webkit-line-clamp">
|
||||
<link rel="match" href="reference/webkit-line-clamp-040-ref.html">
|
||||
<style>
|
||||
.clamp {
|
||||
display: -webkit-box;
|
||||
-webkit-box-orient: vertical;
|
||||
-webkit-line-clamp: 2;
|
||||
font: 16px / 32px serif;
|
||||
white-space: pre;
|
||||
background-color: yellow;
|
||||
height: 5em;
|
||||
}
|
||||
</style>
|
||||
<div class="clamp">Line 1
|
||||
Line 2
|
||||
Line 3
|
||||
Line 4
|
||||
Line 5</div>
|
||||
|
|
@ -0,0 +1,8 @@
|
|||
<!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=1372637">
|
||||
<div style="columns:2; column-fill:auto; line-height:20px; height:40px; orphans:2; widows:2;">
|
||||
<div style="-webkit-line-clamp:2; display:-webkit-box; -webkit-box-orient:vertical;">
|
||||
<br><br><br>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -0,0 +1,13 @@
|
|||
<!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=1372637">
|
||||
<div style="columns:3; column-fill:auto; height:100px;">
|
||||
<div style="display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:3; line-height:20px;">
|
||||
Line 1<br>
|
||||
Line 2<br>
|
||||
Line 3<br>
|
||||
Line 4<br>
|
||||
Line 5<br>
|
||||
</div>
|
||||
<div style="break-before:avoid; break-inside:avoid; height:50px;"></div>
|
||||
</div>
|
||||
|
|
@ -0,0 +1,23 @@
|
|||
<!DOCTYPE html>
|
||||
<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-overflow-3/#webkit-line-clamp">
|
||||
<link rel="match" href="../reference/ref-filled-green-100px-square.xht">
|
||||
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
|
||||
<div style="columns:3; column-fill:auto; gap:0; width:300px; height:250px;">
|
||||
<div style="display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; overflow:clip; line-height:50px; color:transparent; background:green;">
|
||||
<br>
|
||||
<br>
|
||||
<span style="color:red;">
|
||||
FAIL<br>
|
||||
FAIL<br>
|
||||
FAIL<br>
|
||||
FAIL<br>
|
||||
FAIL<br>
|
||||
FAIL<br>
|
||||
FAIL<br>
|
||||
FAIL<br>
|
||||
FAIL<br>
|
||||
FAIL<br>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -0,0 +1,22 @@
|
|||
<!DOCTYPE html>
|
||||
<link rel="help" href="https://drafts.csswg.org/css-overflow-3/#webkit-line-clamp">
|
||||
<link rel="match" href="reference/webkit-line-clamp-block-in-inline-001-ref.html">
|
||||
<meta name="assert" content="-webkit-line-clamp correctly clamps a block-in-inline.">
|
||||
<style>
|
||||
.clamp {
|
||||
display: -webkit-inline-box;
|
||||
-webkit-box-orient: vertical;
|
||||
-webkit-line-clamp: 3;
|
||||
}
|
||||
</style>
|
||||
<body>
|
||||
<div class="clamp">
|
||||
<span>
|
||||
1<br>
|
||||
2<br>
|
||||
<div>3</div>
|
||||
4<br>
|
||||
5
|
||||
</span>
|
||||
</div>
|
||||
</body>
|
||||
Loading…
Add table
Add a link
Reference in a new issue