mirror of
https://github.com/servo/servo.git
synced 2025-08-03 04:30:10 +01:00
Update web-platform-tests to revision b'ee6da9d71d0268d7fdb04e8e5b26858f46ee0cc4'
This commit is contained in:
WPT Sync Bot
cybai
parent
4401622eb1
commit
b77ad115f6
16832 changed files with 270819 additions and 87621 deletions
|
|
@ -0,0 +1,60 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Overflow Reference: scrollbar-gutter size contributes to the scroll container's intrinsic size with "overflow:auto"</title>
|
||||
<link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-overflow-4/#scrollbar-gutter-property">
|
||||
|
||||
<style>
|
||||
.line {
|
||||
display: flex;
|
||||
}
|
||||
.container {
|
||||
block-size: 50px;
|
||||
border: 5px solid black;
|
||||
scrollbar-gutter: stable;
|
||||
margin: 10px;
|
||||
}
|
||||
.hidden {
|
||||
overflow: hidden;
|
||||
}
|
||||
.scroll-x {
|
||||
overflow-x: scroll;
|
||||
}
|
||||
.scroll-y {
|
||||
overflow-y: scroll;
|
||||
}
|
||||
.tall {
|
||||
/* trigger overflow */
|
||||
block-size: 5000px;
|
||||
}
|
||||
</style>
|
||||
|
||||
<div class="line">
|
||||
<div class="container hidden">
|
||||
<div>I should not wrap</div>
|
||||
</div>
|
||||
|
||||
<div class="container scroll-y">
|
||||
<div class="tall">I should not wrap</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="line">
|
||||
<div class="container hidden" style="writing-mode: vertical-rl">
|
||||
<div>I should not wrap</div>
|
||||
</div>
|
||||
|
||||
<div class="container scroll-x" style="writing-mode: vertical-rl">
|
||||
<div class="tall">I should not wrap</div>
|
||||
</div>
|
||||
|
||||
<div class="container hidden" style="writing-mode: vertical-lr">
|
||||
<div>I should not wrap</div>
|
||||
</div>
|
||||
|
||||
<div class="container scroll-x" style="writing-mode: vertical-lr">
|
||||
<div class="tall">I should not wrap</div>
|
||||
</div>
|
||||
</div>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,53 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Overflow Test: scrollbar-gutter size contributes to the scroll container's intrinsic size with "overflow:auto"</title>
|
||||
<link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-overflow-4/#scrollbar-gutter-property">
|
||||
<link rel="match" href="overflow-auto-scrollbar-gutter-intrinsic-001-ref.html">
|
||||
|
||||
<style>
|
||||
.line {
|
||||
display: flex;
|
||||
}
|
||||
.container {
|
||||
block-size: 50px;
|
||||
border: 5px solid black;
|
||||
overflow: auto;
|
||||
scrollbar-gutter: stable;
|
||||
margin: 10px;
|
||||
}
|
||||
.tall {
|
||||
/* trigger overflow */
|
||||
block-size: 5000px;
|
||||
}
|
||||
</style>
|
||||
|
||||
<div class="line">
|
||||
<div class="container">
|
||||
<div>I should not wrap</div>
|
||||
</div>
|
||||
|
||||
<div class="container">
|
||||
<div class="tall">I should not wrap</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="line">
|
||||
<div class="container" style="writing-mode: vertical-rl">
|
||||
<div>I should not wrap</div>
|
||||
</div>
|
||||
|
||||
<div class="container" style="writing-mode: vertical-rl">
|
||||
<div class="tall">I should not wrap</div>
|
||||
</div>
|
||||
|
||||
<div class="container" style="writing-mode: vertical-lr">
|
||||
<div>I should not wrap</div>
|
||||
</div>
|
||||
|
||||
<div class="container" style="writing-mode: vertical-lr">
|
||||
<div class="tall">I should not wrap</div>
|
||||
</div>
|
||||
</div>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,60 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Overflow Reference: scrollbar-gutter size contributes to the scroll container's intrinsic size with "overflow:auto"</title>
|
||||
<link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-overflow-4/#scrollbar-gutter-property">
|
||||
|
||||
<style>
|
||||
.line {
|
||||
display: flex;
|
||||
}
|
||||
.container {
|
||||
block-size: 50px;
|
||||
border: 5px solid black;
|
||||
scrollbar-gutter: stable both-edges;
|
||||
margin: 10px;
|
||||
}
|
||||
.hidden {
|
||||
overflow: hidden;
|
||||
}
|
||||
.scroll-x {
|
||||
overflow-x: scroll;
|
||||
}
|
||||
.scroll-y {
|
||||
overflow-y: scroll;
|
||||
}
|
||||
.tall {
|
||||
/* trigger overflow */
|
||||
block-size: 5000px;
|
||||
}
|
||||
</style>
|
||||
|
||||
<div class="line">
|
||||
<div class="container hidden">
|
||||
<div>I should not wrap</div>
|
||||
</div>
|
||||
|
||||
<div class="container scroll-y">
|
||||
<div class="tall">I should not wrap</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="line">
|
||||
<div class="container hidden" style="writing-mode: vertical-rl">
|
||||
<div>I should not wrap</div>
|
||||
</div>
|
||||
|
||||
<div class="container scroll-x" style="writing-mode: vertical-rl">
|
||||
<div class="tall">I should not wrap</div>
|
||||
</div>
|
||||
|
||||
<div class="container hidden" style="writing-mode: vertical-lr">
|
||||
<div>I should not wrap</div>
|
||||
</div>
|
||||
|
||||
<div class="container scroll-x" style="writing-mode: vertical-lr">
|
||||
<div class="tall">I should not wrap</div>
|
||||
</div>
|
||||
</div>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,53 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Overflow Test: scrollbar-gutter size contributes to the scroll container's intrinsic size with "overflow:auto"</title>
|
||||
<link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-overflow-4/#scrollbar-gutter-property">
|
||||
<link rel="match" href="overflow-auto-scrollbar-gutter-intrinsic-002-ref.html">
|
||||
|
||||
<style>
|
||||
.line {
|
||||
display: flex;
|
||||
}
|
||||
.container {
|
||||
block-size: 50px;
|
||||
border: 5px solid black;
|
||||
overflow: auto;
|
||||
scrollbar-gutter: stable both-edges;
|
||||
margin: 10px;
|
||||
}
|
||||
.tall {
|
||||
/* trigger overflow */
|
||||
block-size: 5000px;
|
||||
}
|
||||
</style>
|
||||
|
||||
<div class="line">
|
||||
<div class="container">
|
||||
<div>I should not wrap</div>
|
||||
</div>
|
||||
|
||||
<div class="container">
|
||||
<div class="tall">I should not wrap</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="line">
|
||||
<div class="container" style="writing-mode: vertical-rl">
|
||||
<div>I should not wrap</div>
|
||||
</div>
|
||||
|
||||
<div class="container" style="writing-mode: vertical-rl">
|
||||
<div class="tall">I should not wrap</div>
|
||||
</div>
|
||||
|
||||
<div class="container" style="writing-mode: vertical-lr">
|
||||
<div>I should not wrap</div>
|
||||
</div>
|
||||
|
||||
<div class="container" style="writing-mode: vertical-lr">
|
||||
<div class="tall">I should not wrap</div>
|
||||
</div>
|
||||
</div>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,47 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Overflow Test: scrollbar-gutter size doesn't contribute to the scroll container's intrinsic size with "overflow:auto" and "scrollbar-width: none"</title>
|
||||
<link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-overflow-4/#scrollbar-gutter-property">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-scrollbars/#scrollbar-width">
|
||||
|
||||
<style>
|
||||
.line {
|
||||
display: flex;
|
||||
}
|
||||
.container {
|
||||
block-size: 50px;
|
||||
border: 5px solid black;
|
||||
margin: 10px;
|
||||
}
|
||||
</style>
|
||||
|
||||
<div class="line">
|
||||
<div class="container">
|
||||
<div>I should not wrap</div>
|
||||
</div>
|
||||
|
||||
<div class="container">
|
||||
<div>I should not wrap</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="line">
|
||||
<div class="container" style="writing-mode: vertical-rl">
|
||||
<div>I should not wrap</div>
|
||||
</div>
|
||||
|
||||
<div class="container" style="writing-mode: vertical-rl">
|
||||
<div>I should not wrap</div>
|
||||
</div>
|
||||
|
||||
<div class="container" style="writing-mode: vertical-lr">
|
||||
<div>I should not wrap</div>
|
||||
</div>
|
||||
|
||||
<div class="container" style="writing-mode: vertical-lr">
|
||||
<div>I should not wrap</div>
|
||||
</div>
|
||||
</div>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,55 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Overflow Test: scrollbar-gutter size doesn't contribute to the scroll container's intrinsic size with "overflow:auto" and "scrollbar-width: none"</title>
|
||||
<link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-overflow-4/#scrollbar-gutter-property">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-scrollbars/#scrollbar-width">
|
||||
<link rel="match" href="overflow-auto-scrollbar-gutter-intrinsic-003-ref.html">
|
||||
|
||||
<style>
|
||||
.line {
|
||||
display: flex;
|
||||
}
|
||||
.container {
|
||||
block-size: 50px;
|
||||
border: 5px solid black;
|
||||
overflow: auto;
|
||||
scrollbar-gutter: stable;
|
||||
scrollbar-width: none;
|
||||
margin: 10px;
|
||||
}
|
||||
.tall {
|
||||
/* trigger overflow */
|
||||
block-size: 5000px;
|
||||
}
|
||||
</style>
|
||||
|
||||
<div class="line">
|
||||
<div class="container">
|
||||
<div>I should not wrap</div>
|
||||
</div>
|
||||
|
||||
<div class="container">
|
||||
<div class="tall">I should not wrap</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="line">
|
||||
<div class="container" style="writing-mode: vertical-rl">
|
||||
<div>I should not wrap</div>
|
||||
</div>
|
||||
|
||||
<div class="container" style="writing-mode: vertical-rl">
|
||||
<div class="tall">I should not wrap</div>
|
||||
</div>
|
||||
|
||||
<div class="container" style="writing-mode: vertical-lr">
|
||||
<div>I should not wrap</div>
|
||||
</div>
|
||||
|
||||
<div class="container" style="writing-mode: vertical-lr">
|
||||
<div class="tall">I should not wrap</div>
|
||||
</div>
|
||||
</div>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,22 @@
|
|||
<!doctype html>
|
||||
<html class="reftest">
|
||||
<meta charset="utf-8">
|
||||
<title>Overflow-clip-margin has no effect with overflow:scroll and paint containment (ref)</title>
|
||||
<link rel="help" href="https://www.w3.org/TR/css-overflow-3/#propdef-overflow-clip-margin">
|
||||
<link rel="author" title="Vladimir Levin" href="mailto:vmpstr@chromium.org">
|
||||
<style>
|
||||
.container {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
contain: paint;
|
||||
overflow: scroll;
|
||||
}
|
||||
.child {
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
background: lightblue;
|
||||
}
|
||||
</style>
|
||||
<div class=container>
|
||||
<div class=child></div>
|
||||
</div>
|
||||
|
|
@ -0,0 +1,24 @@
|
|||
<!doctype html>
|
||||
<html class="reftest">
|
||||
<meta charset="utf-8">
|
||||
<title>Overflow-clip-margin has no effect with overflow:scroll and paint containment </title>
|
||||
<link rel="help" href="https://www.w3.org/TR/css-overflow-3/#propdef-overflow-clip-margin">
|
||||
<link rel="author" title="Vladimir Levin" href="mailto:vmpstr@chromium.org">
|
||||
<link rel="match" href="overflow-clip-margin-008-ref.html">
|
||||
<style>
|
||||
.container {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
overflow-clip-margin: 20px;
|
||||
contain: paint;
|
||||
overflow: scroll;
|
||||
}
|
||||
.child {
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
background: lightblue;
|
||||
}
|
||||
</style>
|
||||
<div class=container>
|
||||
<div class=child></div>
|
||||
</div>
|
||||
|
|
@ -0,0 +1,22 @@
|
|||
<!doctype html>
|
||||
<html class="reftest">
|
||||
<meta charset="utf-8">
|
||||
<title>Overflow-clip-margin can be inherited even if it has no effect on specified element</title>
|
||||
<link rel="help" href="https://www.w3.org/TR/css-overflow-3/#propdef-overflow-clip-margin">
|
||||
<link rel="author" title="Vladimir Levin" href="mailto:vmpstr@chromium.org">
|
||||
<style>
|
||||
.container {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
overflow-clip-margin: 20px;
|
||||
overflow: clip;
|
||||
}
|
||||
.child {
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
background: lightblue;
|
||||
}
|
||||
</style>
|
||||
<div class=container>
|
||||
<div class=child></div>
|
||||
</div>
|
||||
|
|
@ -0,0 +1,28 @@
|
|||
<!doctype html>
|
||||
<html class="reftest">
|
||||
<meta charset="utf-8">
|
||||
<title>Overflow-clip-margin can be inherited even if it has no effect on specified element</title>
|
||||
<link rel="help" href="https://www.w3.org/TR/css-overflow-3/#propdef-overflow-clip-margin">
|
||||
<link rel="author" title="Vladimir Levin" href="mailto:vmpstr@chromium.org">
|
||||
<link rel="match" href="overflow-clip-margin-009-ref.html">
|
||||
<style>
|
||||
.prop {
|
||||
overflow-clip-margin: 20px;
|
||||
}
|
||||
.container {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
overflow-clip-margin: inherit;
|
||||
overflow: clip;
|
||||
}
|
||||
.child {
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
background: lightblue;
|
||||
}
|
||||
</style>
|
||||
<div class=prop>
|
||||
<div class=container>
|
||||
<div class=child></div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -0,0 +1,40 @@
|
|||
<!doctype html>
|
||||
<html class="reftest">
|
||||
<meta charset="utf-8">
|
||||
<title>Overflow-clip-margin corner shape (ref)</title>
|
||||
<link rel="help" href="https://www.w3.org/TR/css-overflow-3/#propdef-overflow-clip-margin">
|
||||
<link rel="author" title="Vladimir Levin" href="mailto:vmpstr@chromium.org">
|
||||
<style>
|
||||
.container {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
|
||||
position: relative;
|
||||
top: 30px;
|
||||
left: 30px;
|
||||
|
||||
border: 5px solid green;
|
||||
|
||||
border-radius: 0px 15px 25px 35px;
|
||||
}
|
||||
.clipper {
|
||||
width: 140px;
|
||||
height: 140px;
|
||||
|
||||
margin: -20px;
|
||||
border-radius:0px 27.5px 40px 50px;
|
||||
overflow: clip;
|
||||
}
|
||||
.child {
|
||||
width: 400px;
|
||||
height: 400px;
|
||||
background: lightblue;
|
||||
opacity: 0.8;
|
||||
}
|
||||
</style>
|
||||
|
||||
<div class=container>
|
||||
<div class=clipper>
|
||||
<div class=child></div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -0,0 +1,34 @@
|
|||
<!doctype html>
|
||||
<html class="reftest">
|
||||
<meta charset="utf-8">
|
||||
<title>Overflow-clip-margin corner shape</title>
|
||||
<link rel="help" href="https://www.w3.org/TR/css-overflow-3/#propdef-overflow-clip-margin">
|
||||
<link rel="author" title="Vladimir Levin" href="mailto:vmpstr@chromium.org">
|
||||
<link rel="match" href="overflow-clip-margin-010-ref.html">
|
||||
<style>
|
||||
.container {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
|
||||
position: relative;
|
||||
top: 30px;
|
||||
left: 30px;
|
||||
|
||||
border: 5px solid green;
|
||||
|
||||
overflow: clip;
|
||||
overflow-clip-margin: 20px;
|
||||
border-radius: 0px 15px 25px 35px;
|
||||
}
|
||||
.child {
|
||||
width: 400px;
|
||||
height: 400px;
|
||||
margin: -200px;
|
||||
background: lightblue;
|
||||
opacity: 0.8;
|
||||
}
|
||||
</style>
|
||||
|
||||
<div class=container>
|
||||
<div class=child></div>
|
||||
</div>
|
||||
|
|
@ -0,0 +1,10 @@
|
|||
<!DOCTYPE html>
|
||||
<div id="scroller" style="overflow: scroll; width: 100px; height: 100px;
|
||||
border: 100px solid white; background: green">
|
||||
<div style="height: 200px"></div>
|
||||
</div>
|
||||
<script>
|
||||
onload = () => {
|
||||
scroller.scrollTo(0, 100);
|
||||
};
|
||||
</script>
|
||||
|
|
@ -0,0 +1,16 @@
|
|||
<!DOCTYPE html>
|
||||
<title>CSS Overflow: overflow: scroll with big border and a small overflowing content</title>
|
||||
<link rel="help" href="https://drafts.csswg.org/css-overflow-3#propdef-overflow">
|
||||
<link rel="match" href="overflow-scroll-big-border-small-content-ref.html">
|
||||
<div id="scroller" style="overflow: scroll; width: 100px; height: 100px;
|
||||
border: 100px solid white; background: red">
|
||||
<div style="height: 50px; background: green"></div>
|
||||
<div style="height: 50px; background: green"></div>
|
||||
<div style="height: 50px; background: green"></div>
|
||||
<div style="height: 50px; background: green"></div>
|
||||
</div>
|
||||
<script>
|
||||
onload = () => {
|
||||
scroller.scrollTo(0, 100);
|
||||
};
|
||||
</script>
|
||||
|
|
@ -0,0 +1,20 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Overflow Reference: Intrinsic size of a "overflow:auto" vertical scroll container</title>
|
||||
<link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
|
||||
<link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
|
||||
|
||||
<style>
|
||||
.container {
|
||||
border: 1px solid black;
|
||||
width: 100px;
|
||||
display: inline-block;
|
||||
}
|
||||
</style>
|
||||
|
||||
<div class="container" style="overflow-x: scroll;"></div>
|
||||
<div class="container" style="overflow-y: scroll;"></div>
|
||||
<div class="container" style="overflow-x: scroll;"></div>
|
||||
<div class="container" style="overflow-y: scroll;"></div>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,23 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Overflow Test: Intrinsic size of a "overflow:auto" vertical scroll container</title>
|
||||
<link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
|
||||
<link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-overflow-3/#overflow-properties">
|
||||
<link rel="match" href="overflow-scroll-intrinsic-001-ref.html">
|
||||
|
||||
<style>
|
||||
.container {
|
||||
border: 1px solid black;
|
||||
width: 100px;
|
||||
display: inline-block;
|
||||
}
|
||||
</style>
|
||||
|
||||
<div class="container" style="writing-mode: vertical-rl; overflow-x: scroll;"></div>
|
||||
<div class="container" style="writing-mode: vertical-rl; overflow-y: scroll;"></div>
|
||||
<div class="container" style="writing-mode: vertical-lr; overflow-x: scroll;"></div>
|
||||
<div class="container" style="writing-mode: vertical-lr; overflow-y: scroll;"></div>
|
||||
|
||||
</html>
|
||||
|
|
@ -0,0 +1,73 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Overflow Reference: test scrollbar-gutter with horizontal left to right content</title>
|
||||
<link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
|
||||
<link rel="author" title="Mozilla" href="http://www.mozilla.org/">
|
||||
|
||||
<style>
|
||||
.line {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.container {
|
||||
writing-mode: horizontal-tb;
|
||||
direction: ltr;
|
||||
|
||||
box-sizing: border-box;
|
||||
block-size: 200px;
|
||||
inline-size: 200px;
|
||||
margin: 10px;
|
||||
background: deepskyblue;
|
||||
resize: both;
|
||||
}
|
||||
|
||||
.content {
|
||||
inline-size: 100%;
|
||||
block-size: 200%;
|
||||
background: lightsalmon;
|
||||
}
|
||||
</style>
|
||||
|
||||
<div class="line">
|
||||
<div class="container" style="overflow-y: auto">
|
||||
<div class="content"></div>
|
||||
</div>
|
||||
|
||||
<div class="container" style="overflow-y: scroll" id="container_scroll_stable">
|
||||
<div class="content" id="content_scroll_stable"></div>
|
||||
</div>
|
||||
|
||||
<div class="container" style="overflow-y: hidden" id="container_hidden_stable">
|
||||
<div class="content"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="line">
|
||||
<div class="container" style="overflow-y: auto;" id="container_auto_stable_both_edges">
|
||||
<div class="content"></div>
|
||||
</div>
|
||||
|
||||
<div class="container" style="overflow-y: scroll" id="container_scroll_stable_both_edges">
|
||||
<div class="content"></div>
|
||||
</div>
|
||||
|
||||
<div class="container" style="overflow-y: hidden;" id="container_hidden_stable_both_edges">
|
||||
<div class="content"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
let container_scroll_stable = document.getElementById("container_scroll_stable");
|
||||
let content_scroll_stable = document.getElementById("content_scroll_stable");
|
||||
let vScrollbarWidth = (container_scroll_stable.offsetWidth - content_scroll_stable.offsetWidth);
|
||||
let vScrollbarWidthStr = vScrollbarWidth + "px";
|
||||
|
||||
// Simulate scrollbar-gutter via padding on containers.
|
||||
document.getElementById("container_hidden_stable").style.paddingInlineEnd = vScrollbarWidthStr;
|
||||
document.getElementById("container_auto_stable_both_edges").style.paddingInlineStart = vScrollbarWidthStr;
|
||||
document.getElementById("container_scroll_stable_both_edges").style.paddingInlineStart = vScrollbarWidthStr;
|
||||
document.getElementById("container_hidden_stable_both_edges").style.paddingInlineStart = vScrollbarWidthStr;
|
||||
document.getElementById("container_hidden_stable_both_edges").style.paddingInlineEnd = vScrollbarWidthStr;
|
||||
</script>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,60 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Overflow: test scrollbar-gutter with horizontal left to right content</title>
|
||||
<link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
|
||||
<link rel="author" title="Mozilla" href="http://www.mozilla.org/">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-overflow-4/#scrollbar-gutter-property">
|
||||
<link rel="match" href="scrollbar-gutter-002-ref.html">
|
||||
|
||||
<style>
|
||||
.line {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.container {
|
||||
writing-mode: horizontal-tb;
|
||||
direction: ltr;
|
||||
|
||||
block-size: 200px;
|
||||
inline-size: 200px;
|
||||
margin: 10px;
|
||||
background: deepskyblue;
|
||||
resize: both;
|
||||
}
|
||||
|
||||
.content {
|
||||
inline-size: 100%;
|
||||
block-size: 200%;
|
||||
background: lightsalmon;
|
||||
}
|
||||
</style>
|
||||
|
||||
<div class="line">
|
||||
<div class="container" style="overflow-y: auto; scrollbar-gutter: stable">
|
||||
<div class="content"></div>
|
||||
</div>
|
||||
|
||||
<div class="container" style="overflow-y: scroll; scrollbar-gutter: stable">
|
||||
<div class="content"></div>
|
||||
</div>
|
||||
|
||||
<div class="container" style="overflow-y: hidden; scrollbar-gutter: stable">
|
||||
<div class="content"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="line">
|
||||
<div class="container" style="overflow-y: auto; scrollbar-gutter: stable both-edges">
|
||||
<div class="content"></div>
|
||||
</div>
|
||||
|
||||
<div class="container" style="overflow-y: scroll; scrollbar-gutter: stable both-edges">
|
||||
<div class="content"></div>
|
||||
</div>
|
||||
|
||||
<div class="container" style="overflow-y: hidden; scrollbar-gutter: stable both-edges">
|
||||
<div class="content"></div>
|
||||
</div>
|
||||
</div>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,11 @@
|
|||
<!doctype html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Test Reference</title>
|
||||
<link rel="stylesheet" href="/fonts/ahem.css">
|
||||
<style>
|
||||
#ref {
|
||||
font: 100px/1 Ahem;
|
||||
color: green;
|
||||
}
|
||||
</style>
|
||||
<div id="ref">X<br>X</div>
|
||||
|
|
@ -0,0 +1,21 @@
|
|||
<!doctype html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Overflow: scrollbar-gutter changing dynamically</title>
|
||||
<link rel="help" href="https://drafts.csswg.org/css-overflow-4/#scrollbar-gutter-property">
|
||||
<link rel="stylesheet" href="/fonts/ahem.css">
|
||||
<link rel="match" href="scrollbar-gutter-dynamic-001-ref.html">
|
||||
|
||||
<style>
|
||||
#scroller {
|
||||
font: 100px/1 Ahem;
|
||||
color: green;
|
||||
overflow-y: auto;
|
||||
width: 300px;
|
||||
height: 300px;
|
||||
}
|
||||
</style>
|
||||
<div id="scroller">X X</div>
|
||||
<script>
|
||||
scroller.offsetTop;
|
||||
scroller.style.scrollbarGutter = "stable";
|
||||
</script>
|
||||
|
|
@ -0,0 +1,73 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Overflow Reference: test scrollbar-gutter with horizontal right to left content</title>
|
||||
<link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
|
||||
<link rel="author" title="Mozilla" href="http://www.mozilla.org/">
|
||||
|
||||
<style>
|
||||
.line {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.container {
|
||||
writing-mode: horizontal-tb;
|
||||
direction: rtl;
|
||||
|
||||
box-sizing: border-box;
|
||||
block-size: 200px;
|
||||
inline-size: 200px;
|
||||
margin: 10px;
|
||||
background: deepskyblue;
|
||||
resize: both;
|
||||
}
|
||||
|
||||
.content {
|
||||
inline-size: 100%;
|
||||
block-size: 200%;
|
||||
background: lightsalmon;
|
||||
}
|
||||
</style>
|
||||
|
||||
<div class="line">
|
||||
<div class="container" style="overflow-y: auto">
|
||||
<div class="content"></div>
|
||||
</div>
|
||||
|
||||
<div class="container" style="overflow-y: scroll" id="container_scroll_stable">
|
||||
<div class="content" id="content_scroll_stable"></div>
|
||||
</div>
|
||||
|
||||
<div class="container" style="overflow-y: hidden" id="container_hidden_stable">
|
||||
<div class="content"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="line">
|
||||
<div class="container" style="overflow-y: auto;" id="container_auto_stable_both_edges">
|
||||
<div class="content"></div>
|
||||
</div>
|
||||
|
||||
<div class="container" style="overflow-y: scroll" id="container_scroll_stable_both_edges">
|
||||
<div class="content"></div>
|
||||
</div>
|
||||
|
||||
<div class="container" style="overflow-y: hidden;" id="container_hidden_stable_both_edges">
|
||||
<div class="content"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
let container_scroll_stable = document.getElementById("container_scroll_stable");
|
||||
let content_scroll_stable = document.getElementById("content_scroll_stable");
|
||||
let vScrollbarWidth = (container_scroll_stable.offsetWidth - content_scroll_stable.offsetWidth);
|
||||
let vScrollbarWidthStr = vScrollbarWidth + "px";
|
||||
|
||||
// Simulate scrollbar-gutter via padding on containers.
|
||||
document.getElementById("container_hidden_stable").style.paddingInlineEnd = vScrollbarWidthStr;
|
||||
document.getElementById("container_auto_stable_both_edges").style.paddingInlineStart = vScrollbarWidthStr;
|
||||
document.getElementById("container_scroll_stable_both_edges").style.paddingInlineStart = vScrollbarWidthStr;
|
||||
document.getElementById("container_hidden_stable_both_edges").style.paddingInlineStart = vScrollbarWidthStr;
|
||||
document.getElementById("container_hidden_stable_both_edges").style.paddingInlineEnd = vScrollbarWidthStr;
|
||||
</script>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,60 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Overflow: test scrollbar-gutter with horizontal right to left content</title>
|
||||
<link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
|
||||
<link rel="author" title="Mozilla" href="http://www.mozilla.org/">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-overflow-4/#scrollbar-gutter-property">
|
||||
<link rel="match" href="scrollbar-gutter-rtl-002-ref.html">
|
||||
|
||||
<style>
|
||||
.line {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.container {
|
||||
writing-mode: horizontal-tb;
|
||||
direction: rtl;
|
||||
|
||||
block-size: 200px;
|
||||
inline-size: 200px;
|
||||
margin: 10px;
|
||||
background: deepskyblue;
|
||||
resize: both;
|
||||
}
|
||||
|
||||
.content {
|
||||
inline-size: 100%;
|
||||
block-size: 200%;
|
||||
background: lightsalmon;
|
||||
}
|
||||
</style>
|
||||
|
||||
<div class="line">
|
||||
<div class="container" style="overflow-y: auto; scrollbar-gutter: stable">
|
||||
<div class="content"></div>
|
||||
</div>
|
||||
|
||||
<div class="container" style="overflow-y: scroll; scrollbar-gutter: stable">
|
||||
<div class="content"></div>
|
||||
</div>
|
||||
|
||||
<div class="container" style="overflow-y: hidden; scrollbar-gutter: stable">
|
||||
<div class="content"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="line">
|
||||
<div class="container" style="overflow-y: auto; scrollbar-gutter: stable both-edges">
|
||||
<div class="content"></div>
|
||||
</div>
|
||||
|
||||
<div class="container" style="overflow-y: scroll; scrollbar-gutter: stable both-edges">
|
||||
<div class="content"></div>
|
||||
</div>
|
||||
|
||||
<div class="container" style="overflow-y: hidden; scrollbar-gutter: stable both-edges">
|
||||
<div class="content"></div>
|
||||
</div>
|
||||
</div>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,72 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Overflow Reference: test scrollbar-gutter with vertical left to right content</title>
|
||||
<link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
|
||||
<link rel="author" title="Mozilla" href="http://www.mozilla.org/">
|
||||
|
||||
<style>
|
||||
.line {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.container {
|
||||
writing-mode: vertical-lr;
|
||||
|
||||
box-sizing: border-box;
|
||||
block-size: 200px;
|
||||
inline-size: 200px;
|
||||
margin: 10px;
|
||||
background: deepskyblue;
|
||||
resize: both;
|
||||
}
|
||||
|
||||
.content {
|
||||
inline-size: 100%;
|
||||
block-size: 200%;
|
||||
background: lightsalmon;
|
||||
}
|
||||
</style>
|
||||
|
||||
<div class="line">
|
||||
<div class="container" style="overflow-x: auto">
|
||||
<div class="content"></div>
|
||||
</div>
|
||||
|
||||
<div class="container" style="overflow-x: scroll" id="container_scroll_stable">
|
||||
<div class="content" id="content_scroll_stable"></div>
|
||||
</div>
|
||||
|
||||
<div class="container" style="overflow-x: hidden" id="container_hidden_stable">
|
||||
<div class="content"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="line">
|
||||
<div class="container" style="overflow-x: auto;" id="container_auto_stable_both_edges">
|
||||
<div class="content"></div>
|
||||
</div>
|
||||
|
||||
<div class="container" style="overflow-x: scroll" id="container_scroll_stable_both_edges">
|
||||
<div class="content"></div>
|
||||
</div>
|
||||
|
||||
<div class="container" style="overflow-x: hidden;" id="container_hidden_stable_both_edges">
|
||||
<div class="content"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
let container_scroll_stable = document.getElementById("container_scroll_stable");
|
||||
let content_scroll_stable = document.getElementById("content_scroll_stable");
|
||||
let hScrollbarHeight = (container_scroll_stable.offsetHeight - content_scroll_stable.offsetHeight);
|
||||
let hScrollbarHeightStr = hScrollbarHeight + "px";
|
||||
|
||||
// Simulate scrollbar-gutter via padding on containers.
|
||||
document.getElementById("container_hidden_stable").style.paddingInlineEnd = hScrollbarHeightStr;
|
||||
document.getElementById("container_auto_stable_both_edges").style.paddingInlineStart = hScrollbarHeightStr;
|
||||
document.getElementById("container_scroll_stable_both_edges").style.paddingInlineStart = hScrollbarHeightStr;
|
||||
document.getElementById("container_hidden_stable_both_edges").style.paddingInlineStart = hScrollbarHeightStr;
|
||||
document.getElementById("container_hidden_stable_both_edges").style.paddingInlineEnd = hScrollbarHeightStr;
|
||||
</script>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,59 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Overflow: test scrollbar-gutter with vertical left to right content</title>
|
||||
<link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
|
||||
<link rel="author" title="Mozilla" href="http://www.mozilla.org/">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-overflow-4/#scrollbar-gutter-property">
|
||||
<link rel="match" href="scrollbar-gutter-vertical-lr-002-ref.html">
|
||||
|
||||
<style>
|
||||
.line {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.container {
|
||||
writing-mode: vertical-lr;
|
||||
|
||||
block-size: 200px;
|
||||
inline-size: 200px;
|
||||
margin: 10px;
|
||||
background: deepskyblue;
|
||||
resize: both;
|
||||
}
|
||||
|
||||
.content {
|
||||
inline-size: 100%;
|
||||
block-size: 200%;
|
||||
background: lightsalmon;
|
||||
}
|
||||
</style>
|
||||
|
||||
<div class="line">
|
||||
<div class="container" style="overflow-x: auto; scrollbar-gutter: stable">
|
||||
<div class="content"></div>
|
||||
</div>
|
||||
|
||||
<div class="container" style="overflow-x: scroll; scrollbar-gutter: stable">
|
||||
<div class="content"></div>
|
||||
</div>
|
||||
|
||||
<div class="container" style="overflow-x: hidden; scrollbar-gutter: stable">
|
||||
<div class="content"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="line">
|
||||
<div class="container" style="overflow-x: auto; scrollbar-gutter: stable both-edges">
|
||||
<div class="content"></div>
|
||||
</div>
|
||||
|
||||
<div class="container" style="overflow-x: scroll; scrollbar-gutter: stable both-edges">
|
||||
<div class="content"></div>
|
||||
</div>
|
||||
|
||||
<div class="container" style="overflow-x: hidden; scrollbar-gutter: stable both-edges">
|
||||
<div class="content"></div>
|
||||
</div>
|
||||
</div>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,73 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Overflow Reference: test scrollbar-gutter with vertical right to left content</title>
|
||||
<link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
|
||||
<link rel="author" title="Mozilla" href="http://www.mozilla.org/">
|
||||
|
||||
<style>
|
||||
.line {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.container {
|
||||
writing-mode: vertical-rl;
|
||||
direction: ltr;
|
||||
|
||||
box-sizing: border-box;
|
||||
block-size: 200px;
|
||||
inline-size: 200px;
|
||||
margin: 10px;
|
||||
background: deepskyblue;
|
||||
resize: both;
|
||||
}
|
||||
|
||||
.content {
|
||||
inline-size: 100%;
|
||||
block-size: 200%;
|
||||
background: lightsalmon;
|
||||
}
|
||||
</style>
|
||||
|
||||
<div class="line">
|
||||
<div class="container" style="overflow-x: auto">
|
||||
<div class="content"></div>
|
||||
</div>
|
||||
|
||||
<div class="container" style="overflow-x: scroll" id="container_scroll_stable">
|
||||
<div class="content" id="content_scroll_stable"></div>
|
||||
</div>
|
||||
|
||||
<div class="container" style="overflow-x: hidden" id="container_hidden_stable">
|
||||
<div class="content"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="line">
|
||||
<div class="container" style="overflow-x: auto;" id="container_auto_stable_both_edges">
|
||||
<div class="content"></div>
|
||||
</div>
|
||||
|
||||
<div class="container" style="overflow-x: scroll" id="container_scroll_stable_both_edges">
|
||||
<div class="content"></div>
|
||||
</div>
|
||||
|
||||
<div class="container" style="overflow-x: hidden;" id="container_hidden_stable_both_edges">
|
||||
<div class="content"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
let container_scroll_stable = document.getElementById("container_scroll_stable");
|
||||
let content_scroll_stable = document.getElementById("content_scroll_stable");
|
||||
let hScrollbarHeight = (container_scroll_stable.offsetHeight - content_scroll_stable.offsetHeight);
|
||||
let hScrollbarHeightStr = hScrollbarHeight + "px";
|
||||
|
||||
// Simulate scrollbar-gutter via padding on containers.
|
||||
document.getElementById("container_hidden_stable").style.paddingInlineEnd = hScrollbarHeightStr;
|
||||
document.getElementById("container_auto_stable_both_edges").style.paddingInlineStart = hScrollbarHeightStr;
|
||||
document.getElementById("container_scroll_stable_both_edges").style.paddingInlineStart = hScrollbarHeightStr;
|
||||
document.getElementById("container_hidden_stable_both_edges").style.paddingInlineStart = hScrollbarHeightStr;
|
||||
document.getElementById("container_hidden_stable_both_edges").style.paddingInlineEnd = hScrollbarHeightStr;
|
||||
</script>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,59 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Overflow: test scrollbar-gutter with vertical right to left content</title>
|
||||
<link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
|
||||
<link rel="author" title="Mozilla" href="http://www.mozilla.org/">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-overflow-4/#scrollbar-gutter-property">
|
||||
<link rel="match" href="scrollbar-gutter-vertical-rl-002-ref.html">
|
||||
|
||||
<style>
|
||||
.line {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.container {
|
||||
writing-mode: vertical-rl;
|
||||
|
||||
block-size: 200px;
|
||||
inline-size: 200px;
|
||||
margin: 10px;
|
||||
background: deepskyblue;
|
||||
resize: both;
|
||||
}
|
||||
|
||||
.content {
|
||||
inline-size: 100%;
|
||||
block-size: 200%;
|
||||
background: lightsalmon;
|
||||
}
|
||||
</style>
|
||||
|
||||
<div class="line">
|
||||
<div class="container" style="overflow-x: auto; scrollbar-gutter: stable">
|
||||
<div class="content"></div>
|
||||
</div>
|
||||
|
||||
<div class="container" style="overflow-x: scroll; scrollbar-gutter: stable">
|
||||
<div class="content"></div>
|
||||
</div>
|
||||
|
||||
<div class="container" style="overflow-x: hidden; scrollbar-gutter: stable">
|
||||
<div class="content"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="line">
|
||||
<div class="container" style="overflow-x: auto; scrollbar-gutter: stable both-edges">
|
||||
<div class="content"></div>
|
||||
</div>
|
||||
|
||||
<div class="container" style="overflow-x: scroll; scrollbar-gutter: stable both-edges">
|
||||
<div class="content"></div>
|
||||
</div>
|
||||
|
||||
<div class="container" style="overflow-x: hidden; scrollbar-gutter: stable both-edges">
|
||||
<div class="content"></div>
|
||||
</div>
|
||||
</div>
|
||||
</html>
|
||||
Loading…
Add table
Add a link
Reference in a new issue