Update web-platform-tests to revision b'efce5c7cd31b0e1add4f41758504c767b56abeed' (#36222)

Signed-off-by: WPT Sync Bot <ghbot+wpt-sync@servo.org>
This commit is contained in:
Servo WPT Sync 2025-03-30 03:40:11 +02:00 committed by GitHub
parent 44faff0474
commit c593e15fa8
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
121 changed files with 4205 additions and 714 deletions

File diff suppressed because it is too large Load diff

View file

@ -0,0 +1,2 @@
[flex-gap-decorations-001.html]
expected: FAIL

View file

@ -0,0 +1,2 @@
[flex-gap-decorations-002.html]
expected: FAIL

View file

@ -0,0 +1,2 @@
[flex-gap-decorations-003.html]
expected: FAIL

View file

@ -0,0 +1,2 @@
[flex-gap-decorations-004.html]
expected: FAIL

View file

@ -0,0 +1,2 @@
[flex-gap-decorations-005.html]
expected: FAIL

View file

@ -0,0 +1,2 @@
[flex-gap-decorations-006.html]
expected: FAIL

View file

@ -0,0 +1,2 @@
[flex-gap-decorations-007.html]
expected: FAIL

View file

@ -0,0 +1,2 @@
[flex-gap-decorations-008.html]
expected: FAIL

View file

@ -0,0 +1,2 @@
[flex-gap-decorations-009.html]
expected: FAIL

View file

@ -0,0 +1,2 @@
[flex-gap-decorations-010.html]
expected: FAIL

View file

@ -0,0 +1,2 @@
[flex-gap-decorations-011.html]
expected: FAIL

View file

@ -0,0 +1,2 @@
[flex-gap-decorations-013.html]
expected: FAIL

View file

@ -0,0 +1,2 @@
[flex-gap-decorations-014.html]
expected: FAIL

View file

@ -0,0 +1,2 @@
[flex-gap-decorations-015.html]
expected: FAIL

View file

@ -1,3 +0,0 @@
[grid-content-alignment-with-abspos-001.html]
[.grid 1]
expected: FAIL

View file

@ -0,0 +1,2 @@
[gradient-infinity-001.html]
expected: FAIL

View file

@ -0,0 +1,2 @@
[gradient-infinity-002.html]
expected: FAIL

View file

@ -1,5 +1,4 @@
[oversized-payload.tentative.https.window.html]
expected: ERROR
[fetchLater() does not accept payload[size=65537\] exceeding per-origin quota in a POST request body of String in same-origin iframe.]
expected: FAIL

View file

@ -0,0 +1,3 @@
[009.html]
[Link with onclick form submit to javascript url with document.write and href navigation ]
expected: FAIL

View file

@ -1,3 +0,0 @@
[navigation-unload-same-origin-fragment.html]
[Tests that a fragment navigation in the unload handler will not block the initial navigation]
expected: FAIL

View file

@ -0,0 +1,3 @@
[history_pushstate_too_many_calls.optional.html]
[history pushState too many calls]
expected: FAIL

View file

@ -0,0 +1,3 @@
[history_replacestate_too_many_calls.optional.html]
[history replaceState too many calls]
expected: FAIL

View file

@ -1,5 +1,5 @@
[createImageBitmap-transfer.html]
expected: ERROR
expected: TIMEOUT
[Transfer ImageBitmap created from a vector HTMLImageElement]
expected: FAIL

View file

@ -0,0 +1,2 @@
[2d.canvas.host.size.large.html]
expected: CRASH

View file

@ -0,0 +1,2 @@
[2d.canvas.host.size.large.worker.html]
expected: CRASH

View file

@ -0,0 +1,54 @@
[credentialless-cache-storage-from-credentialless.https.tentative.window.html?document]
[[document\] isolate-and-credentialless => none]
expected: FAIL
[[document\] isolate-and-credentialless => isolate-and-credentialless]
expected: FAIL
[[document\] isolate-and-credentialless => isolate-and-require-corp]
expected: FAIL
[[document\] isolate-and-credentialless => isolate-and-require-corp + CORP]
expected: FAIL
[credentialless-cache-storage-from-credentialless.https.tentative.window.html?service_worker]
[[service_worker\] isolate-and-credentialless => none]
expected: FAIL
[[service_worker\] isolate-and-credentialless => isolate-and-credentialless]
expected: FAIL
[[service_worker\] isolate-and-credentialless => isolate-and-require-corp]
expected: FAIL
[[service_worker\] isolate-and-credentialless => isolate-and-require-corp + CORP]
expected: FAIL
[credentialless-cache-storage-from-credentialless.https.tentative.window.html?dedicated_worker]
[[dedicated_worker\] isolate-and-credentialless => none]
expected: FAIL
[[dedicated_worker\] isolate-and-credentialless => isolate-and-credentialless]
expected: FAIL
[[dedicated_worker\] isolate-and-credentialless => isolate-and-require-corp]
expected: FAIL
[[dedicated_worker\] isolate-and-credentialless => isolate-and-require-corp + CORP]
expected: FAIL
[credentialless-cache-storage-from-credentialless.https.tentative.window.html?shared_worker]
[[shared_worker\] isolate-and-credentialless => none]
expected: FAIL
[[shared_worker\] isolate-and-credentialless => isolate-and-credentialless]
expected: FAIL
[[shared_worker\] isolate-and-credentialless => isolate-and-require-corp]
expected: FAIL
[[shared_worker\] isolate-and-credentialless => isolate-and-require-corp + CORP]
expected: FAIL

View file

@ -0,0 +1,90 @@
[credentialless-cache-storage-from-none.https.tentative.window.html?shared_worker]
[[shared_worker\] none => none]
expected: FAIL
[[shared_worker\] none => isolate-and-credentialless]
expected: FAIL
[[shared_worker\] none => isolate-and-credentialless (omit)]
expected: FAIL
[[shared_worker\] none => isolate-and-credentialless + CORP]
expected: FAIL
[[shared_worker\] none => isolate-and-require-corp]
expected: FAIL
[[shared_worker\] none => isolate-and-require-corp (omit)]
expected: FAIL
[[shared_worker\] none => isolate-and-require-corp + CORP]
expected: FAIL
[credentialless-cache-storage-from-none.https.tentative.window.html?document]
[[document\] none => none]
expected: FAIL
[[document\] none => isolate-and-credentialless]
expected: FAIL
[[document\] none => isolate-and-credentialless (omit)]
expected: FAIL
[[document\] none => isolate-and-credentialless + CORP]
expected: FAIL
[[document\] none => isolate-and-require-corp]
expected: FAIL
[[document\] none => isolate-and-require-corp (omit)]
expected: FAIL
[[document\] none => isolate-and-require-corp + CORP]
expected: FAIL
[credentialless-cache-storage-from-none.https.tentative.window.html?dedicated_worker]
[[dedicated_worker\] none => none]
expected: FAIL
[[dedicated_worker\] none => isolate-and-credentialless]
expected: FAIL
[[dedicated_worker\] none => isolate-and-credentialless (omit)]
expected: FAIL
[[dedicated_worker\] none => isolate-and-credentialless + CORP]
expected: FAIL
[[dedicated_worker\] none => isolate-and-require-corp]
expected: FAIL
[[dedicated_worker\] none => isolate-and-require-corp (omit)]
expected: FAIL
[[dedicated_worker\] none => isolate-and-require-corp + CORP]
expected: FAIL
[credentialless-cache-storage-from-none.https.tentative.window.html?service_worker]
[[service_worker\] none => none]
expected: FAIL
[[service_worker\] none => isolate-and-credentialless]
expected: FAIL
[[service_worker\] none => isolate-and-credentialless (omit)]
expected: FAIL
[[service_worker\] none => isolate-and-credentialless + CORP]
expected: FAIL
[[service_worker\] none => isolate-and-require-corp]
expected: FAIL
[[service_worker\] none => isolate-and-require-corp (omit)]
expected: FAIL
[[service_worker\] none => isolate-and-require-corp + CORP]
expected: FAIL

View file

@ -0,0 +1,42 @@
[credentialless-cache-storage-from-require-corp.https.tentative.window.html?dedicated_worker]
[[dedicated_worker\] isolate-and-require-corp => none]
expected: FAIL
[[dedicated_worker\] isolate-and-require-corp => isolate-and-credentialless]
expected: FAIL
[[dedicated_worker\] isolate-and-require-corp => isolate-and-require-corp]
expected: FAIL
[credentialless-cache-storage-from-require-corp.https.tentative.window.html?document]
[[document\] isolate-and-require-corp => none]
expected: FAIL
[[document\] isolate-and-require-corp => isolate-and-credentialless]
expected: FAIL
[[document\] isolate-and-require-corp => isolate-and-require-corp]
expected: FAIL
[credentialless-cache-storage-from-require-corp.https.tentative.window.html?shared_worker]
[[shared_worker\] isolate-and-require-corp => none]
expected: FAIL
[[shared_worker\] isolate-and-require-corp => isolate-and-credentialless]
expected: FAIL
[[shared_worker\] isolate-and-require-corp => isolate-and-require-corp]
expected: FAIL
[credentialless-cache-storage-from-require-corp.https.tentative.window.html?service_worker]
[[service_worker\] isolate-and-require-corp => none]
expected: FAIL
[[service_worker\] isolate-and-require-corp => isolate-and-credentialless]
expected: FAIL
[[service_worker\] isolate-and-require-corp => isolate-and-require-corp]
expected: FAIL

View file

@ -1,137 +0,0 @@
[credentialless-cache-storage.https.tentative.window.html?document]
expected: TIMEOUT
[[document\] none => none]
expected: TIMEOUT
[[document\] none => isolate-and-credentialless]
expected: TIMEOUT
[[document\] none => isolate-and-credentialless (omit)]
expected: TIMEOUT
[[document\] none => isolate-and-credentialless + CORP]
expected: TIMEOUT
[[document\] none => isolate-and-require-corp]
expected: TIMEOUT
[[document\] none => isolate-and-require-corp (omit)]
expected: TIMEOUT
[[document\] none => isolate-and-require-corp + CORP]
expected: TIMEOUT
[[document\] isolate-and-credentialless => none]
expected: TIMEOUT
[[document\] isolate-and-credentialless => isolate-and-credentialless]
expected: TIMEOUT
[[document\] isolate-and-credentialless => isolate-and-require-corp]
expected: TIMEOUT
[[document\] isolate-and-credentialless => isolate-and-require-corp + CORP]
expected: TIMEOUT
[[document\] isolate-and-require-corp => none]
expected: TIMEOUT
[[document\] isolate-and-require-corp => isolate-and-credentialless]
expected: TIMEOUT
[[document\] isolate-and-require-corp => isolate-and-require-corp]
expected: TIMEOUT
[credentialless-cache-storage.https.tentative.window.html?dedicated_worker]
expected: TIMEOUT
[[dedicated_worker\] none => none]
expected: TIMEOUT
[[dedicated_worker\] none => isolate-and-credentialless]
expected: TIMEOUT
[[dedicated_worker\] none => isolate-and-credentialless (omit)]
expected: TIMEOUT
[[dedicated_worker\] none => isolate-and-credentialless + CORP]
expected: TIMEOUT
[[dedicated_worker\] none => isolate-and-require-corp]
expected: TIMEOUT
[[dedicated_worker\] none => isolate-and-require-corp (omit)]
expected: TIMEOUT
[[dedicated_worker\] none => isolate-and-require-corp + CORP]
expected: TIMEOUT
[[dedicated_worker\] isolate-and-credentialless => none]
expected: TIMEOUT
[[dedicated_worker\] isolate-and-credentialless => isolate-and-credentialless]
expected: TIMEOUT
[[dedicated_worker\] isolate-and-credentialless => isolate-and-require-corp]
expected: TIMEOUT
[[dedicated_worker\] isolate-and-credentialless => isolate-and-require-corp + CORP]
expected: TIMEOUT
[[dedicated_worker\] isolate-and-require-corp => none]
expected: TIMEOUT
[[dedicated_worker\] isolate-and-require-corp => isolate-and-credentialless]
expected: TIMEOUT
[[dedicated_worker\] isolate-and-require-corp => isolate-and-require-corp]
expected: TIMEOUT
[credentialless-cache-storage.https.tentative.window.html?service_worker]
expected: ERROR
[[service_worker\] none => none]
expected: TIMEOUT
[[service_worker\] none => isolate-and-credentialless]
expected: TIMEOUT
[[service_worker\] none => isolate-and-credentialless (omit)]
expected: TIMEOUT
[[service_worker\] none => isolate-and-credentialless + CORP]
expected: TIMEOUT
[[service_worker\] none => isolate-and-require-corp]
expected: TIMEOUT
[[service_worker\] none => isolate-and-require-corp (omit)]
expected: TIMEOUT
[[service_worker\] none => isolate-and-require-corp + CORP]
expected: TIMEOUT
[[service_worker\] isolate-and-credentialless => none]
expected: TIMEOUT
[[service_worker\] isolate-and-credentialless => isolate-and-credentialless]
expected: TIMEOUT
[[service_worker\] isolate-and-credentialless => isolate-and-require-corp]
expected: TIMEOUT
[[service_worker\] isolate-and-credentialless => isolate-and-require-corp + CORP]
expected: TIMEOUT
[[service_worker\] isolate-and-require-corp => none]
expected: TIMEOUT
[[service_worker\] isolate-and-require-corp => isolate-and-credentialless]
expected: TIMEOUT
[[service_worker\] isolate-and-require-corp => isolate-and-require-corp]
expected: TIMEOUT
[credentialless-cache-storage.https.tentative.window.html?shared_worker]
expected: ERROR

View file

@ -1,5 +1,4 @@
[reporting-subresource-corp.tentative.https.html]
expected: ERROR
[[document\] blocked due to DIP]
expected: FAIL
@ -9,9 +8,6 @@
[destination: script]
expected: FAIL
[[dedicated worker\] same-origin]
expected: FAIL
[[dedicated worker\] blocked by CORP: same-origin]
expected: FAIL
@ -44,3 +40,12 @@
[[between service worker and page\] blocked during redirect]
expected: FAIL
[[document with service worker\] same-origin]
expected: FAIL
[[document with service worker\] blocked due to DIP]
expected: FAIL
[[document with service worker\] blocked during redirect]
expected: FAIL

View file

@ -1,4 +1,4 @@
[iframe_sandbox_popups_nonescaping-2.html]
expected: TIMEOUT
[Check that popups from a sandboxed iframe do not escape the sandbox]
expected: NOTRUN
expected: FAIL

View file

@ -90,3 +90,11 @@ promise_test(async t => {
return detector.measureInputUsage('hello', {signal});
});
}, 'Aborting Translator.measureInputUsage().');
promise_test(async () => {
const expected_languages = ['en', 'es'];
const detector = await languageDetector.create({
expectedInputLanguages: expected_languages
});
assert_array_equals(detector.expectedInputLanguages(), expected_languages);
}, 'Creating LanguageDetector with expectedInputLanguages');

View file

@ -0,0 +1,11 @@
<style>
* {
background-color: red;
contain: layout;
}
*:first-child {
visibility: hidden;
background-image: url(data:image/gif;base64,iVBORw0KGgoAAAANSUhEUgAAAGAAAABgCAIAAABt+uBvAAAAAXNSR0IArs4c6QAAAAlwSFlzAAALEwAACxMBAJqcGAAAAAd0SU1FB9wDGhYvCNVA1EIAAAAZdEVYdENvbW1lbnQAQ3JlYXRlZCB3aXRoIEdJTVBXgQ4XAAAAjklEQVR42u3QIQEAMAgAsHNNVspTgARY1BZh0ZWP3VcgSJAgQYIECRKEIEGCBAkSJEgQggQJEiRIkCBBCBIkSJAgQYIECUKQIEGCBAkSJAhBggQJEiRIkCAECRIkSJAgQYIEIUiQIEGCBAkShCBBggQJEiRIEIIECRIkSJAgQYIQJEiQIEGCBAlCkCBBdwaeugIthHvZ+AAAAABJRU5ErkJggg==)
}
</style>
<object data="x">

View file

@ -0,0 +1,4 @@
features:
- name: align-content-block
files:
- align-content-block-*

View file

@ -0,0 +1,97 @@
<!DOCTYPE html>
<title>CSS Anchor Positioning: tests that anchor() works with CSS zoom property</title>
<link rel="help" href="https://drafts.csswg.org/css-anchor-position-1/#anchor-pos">
<link rel="help" href="https://drafts.csswg.org/css-viewport/#zoom-property">
<link rel="author" href="mailto:kiet.ho@apple.com">
<link rel="match" href="reference/anchor-css-zoom-ref.html">
<style>
.containing-block {
position: relative;
width: 150px;
height: 150px;
zoom: 2;
}
.cell {
width: 50px;
height: 50px;
}
#anchor-cell {
position: absolute;
top: 50px;
left: 50px;
anchor-name: --anchor;
background: green;
}
.anchor-positioned-cell {
position: absolute;
position-anchor: --anchor;
}
#top-left {
top: 0;
right: anchor(left);
background: cyan;
}
#top-right {
top: 0;
left: anchor(right);
background: magenta;
}
#bottom-left {
bottom: 0;
right: anchor(left);
background: yellow;
}
#bottom-right {
bottom: 0;
left: anchor(right);
background: black;
}
</style>
<body>
<!--
The boxes below are arranged like this:
(the outside box is .containing-block)
-------------
| 1 | | 2 |
|---|---|---|
| | A | |
|---|---|---|
| 3 | | 4 |
-------------
-->
<div class="containing-block">
<!-- Box A -->
<div class="cell" id="anchor-cell"></div>
<!-- Box 1 -->
<div class="cell anchor-positioned-cell" id="top-left"></div>
<!-- Box 2 -->
<div class="cell anchor-positioned-cell" id="top-right"></div>
<!-- Box 3 -->
<div class="cell anchor-positioned-cell" id="bottom-left"></div>
<!-- Box 4 -->
<div class="cell anchor-positioned-cell" id="bottom-right"></div>
</div>
</body>

View file

@ -0,0 +1,49 @@
<!DOCTYPE html>
<title>CSS Anchor Positioning: tests that anchor-size() works with CSS zoom property</title>
<link rel="help" href="https://drafts.csswg.org/css-anchor-position-1/#anchor-size-fn">
<link rel="help" href="https://drafts.csswg.org/css-viewport/#zoom-property">
<link rel="author" href="mailto:kiet.ho@apple.com">
<link rel="match" href="reference/anchor-size-css-zoom-ref.html">
<style>
#containing-block {
position: relative;
zoom: 2;
}
#anchor {
position: absolute;
width: 200px;
height: 100px;
anchor-name: --anchor;
background: red;
}
#anchor-positioned {
position: absolute;
width: anchor-size(--anchor width);
height: anchor-size(--anchor height);
background: green;
z-index: 1;
}
</style>
Test passes if no red is visible.
<div id="containing-block">
<!--
Both rectangles below overlaps.
#anchor is red, #anchor-positioned is green and above #anchor in Z order.
If no red is visible then #anchor-positioned has fully covered #anchor.
-->
<div id="anchor"></div>
<div id="anchor-positioned"></div>
</div>

View file

@ -0,0 +1,67 @@
<!DOCTYPE html>
<style>
.containing-block {
position: relative;
width: 150px;
height: 150px;
zoom: 2;
}
.cell {
width: 50px;
height: 50px;
}
#anchor-cell {
position: absolute;
top: 50px;
left: 50px;
background: green;
}
.anchor-positioned-cell {
position: absolute;
}
#top-left {
top: 0;
left: 0;
background: cyan;
}
#top-right {
top: 0;
right: 0;
background: magenta;
}
#bottom-left {
bottom: 0;
left: 0;
background: yellow;
}
#bottom-right {
bottom: 0;
right: 0;
background: black;
}
</style>
<body>
<div class="containing-block">
<div class="cell" id="anchor-cell"></div>
<div class="cell anchor-positioned-cell" id="top-left"></div>
<div class="cell anchor-positioned-cell" id="top-right"></div>
<div class="cell anchor-positioned-cell" id="bottom-left"></div>
<div class="cell anchor-positioned-cell" id="bottom-right"></div>
</div>
</body>

View file

@ -0,0 +1,36 @@
<!DOCTYPE html>
<style>
#containing-block {
position: relative;
zoom: 2;
}
#anchor {
position: absolute;
width: 200px;
height: 100px;
background: red;
}
#anchor-positioned {
position: absolute;
width: 200px;
height: 100px;
background: green;
z-index: 1;
}
</style>
Test passes if no red is visible.
<div id="containing-block">
<div id="anchor"></div>
<div id="anchor-positioned"></div>
</div>

View file

@ -0,0 +1,28 @@
<!DOCTYPE html>
<link rel="help" href="https://drafts.csswg.org/css-anchor-position-1/">
<link rel="help" href="https://crbug.com/391903229">
<style>
html {
overflow: hidden;
}
.anchor, .element {
background: green;
width: 100px;
height: 100px;
}
.anchor {
background: red;
anchor-name: --anchor;
}
.element {
position: absolute;
position-anchor: --anchor;
bottom: anchor(top);
left: 50px;
}
</style>
<div style="height: 1000px"></div>
<div class="element"></div>
<div style="overflow: auto; width: 50px">
<div class="anchor"></div>
</div>

View file

@ -11,6 +11,6 @@
test_shorthand_value('flex', 'sign(1em - 1px) sibling-index()', {
'flex-grow': 'sign(1em - 1px)',
'flex-shrink': 'sibling-index()',
'flex-basis': 'auto'
'flex-basis': '0%'
});
</script>

View file

@ -0,0 +1,37 @@
<!DOCTYPE html>
<title>
CSS Gap Decorations: column and row gaps are painted.
</title>
<link rel="help" href="https://drafts.csswg.org/css-gaps-1/">
<link rel="match" href="../../../reference/ref-filled-green-100px-square.xht">
<link rel="author" title="Javier Contreras" href="mailto:javiercon@microsoft.com">
<style>
.flex-container {
display: flex;
column-gap: 10px;
row-gap: 10px;
height: 100px;
width: 100px;
background: red;
column-rule-color: green;
column-rule-style: solid;
column-rule-width: 10px;
row-rule-color: green;
row-rule-style: solid;
row-rule-width: 10px;
flex-wrap: wrap;
}
.flex-item {
background: green;
width: 45px;
}
</style>
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
<div class="flex-container">
<div class="flex-item"></div>
<div class="flex-item"></div>
<div class="flex-item"></div>
<div class="flex-item"></div>
</div>

View file

@ -0,0 +1,39 @@
<!DOCTYPE html>
<title>
CSS Gap Decorations: flex column gaps are painted with solid styling.
</title>
<link rel="help" href="https://drafts.csswg.org/css-gaps-1/">
<link rel="match" href="../agnostic/gap-decorations-001-ref.html">
<link rel="author" title="Javier Contreras" href="mailto:javiercon@microsoft.com">
<style>
.flex-container {
height: 110px;
width: 110px;
display: flex;
column-gap: 10px;
row-gap: 10px;
column-rule-color: pink;
column-rule-style: solid;
column-rule-width: 10px;
row-rule-color: green;
row-rule-style: solid;
row-rule-width: 10px;
flex-wrap: wrap;
}
.flex-item {
background: skyblue;
width: 50px;
}
</style>
<div class="flex-container">
<div class="flex-item"></div>
<div class="flex-item"></div>
<div class="flex-item"></div>
<div class="flex-item"></div>
</div>

View file

@ -0,0 +1,79 @@
<!DOCTYPE html>
<link rel="help" href="https://drafts.csswg.org/css-gaps-1/">
<link rel="author" title="Javier Contreras" href="mailto:javiercon@microsoft.com">
<style>
body {
margin: 0px;
}
#flexbox {
border: 2px solid rgb(96 139 168);
display: flex;
column-gap: 10px;
row-gap: 10px;
width: 170px;
flex-wrap: wrap;
}
.items {
background-color: rgb(96 139 168 / 0.2);
flex-shrink: 1;
width: 50px;
height: 50px;
}
#four {
width: 100px;
}
.row-gap {
margin: 0px;
padding: 0px;
height: 10px;
background: blue;
width: 170px;
position: absolute;
}
.column-gap {
display: flex;
flex-direction: column;
row-gap: 60px;
height: 170px;
top: 2px;
width: 10px;
position: absolute;
}
.column {
background: red;
width: 10px;
height: 55px;
}
</style>
<div id="flexbox">
<div class="items">One</div>
<div class="items">Two</div>
<div class="items">Three</div>
<div class="items" id="four">Four</div>
<div class="items">Five</div>
<div class="items">Six</div>
<div class="items">Seven</div>
<div class="items">Eight</div>
</div>
<div id="row1" class="row-gap" style="top: 52px; left: 2px;"></div>
<div id="row2" class="row-gap" style="top: 112px; left: 2px;"></div>
<div id="columns1" style="left: 52px;" class="column-gap">
<div id="c1" class="column"></div>
<div id="c2" class="column"></div>
</div>
<div id="columns2" style="left: 112px;" class="column-gap">
<div id="c1" class="column"></div>
<div id="c2" class="column"></div>
</div>
<div id="vertical3" style="left: 102px; position:absolute; top: 57px; height:60px;" class="column"></div>

View file

@ -0,0 +1,49 @@
<!DOCTYPE html>
<title>
CSS Gap Decorations: flex column and row gaps are painted with solid styling.
</title>
<link rel="help" href="https://drafts.csswg.org/css-gaps-1/">
<link rel="match" href="flex-gap-decorations-003-ref.html">
<link rel="author" title="Javier Contreras" href="mailto:javiercon@microsoft.com">
<style>
body {
margin: 0px;
}
#flexbox {
border: 2px solid rgb(96 139 168);
display: flex;
column-gap: 10px;
row-gap: 10px;
row-rule-style: solid;
row-rule-color: blue;
row-rule-width: 10px;
column-rule-style: solid;
column-rule-color: red;
column-rule-width: 10px;
width: 170px;
flex-wrap: wrap;
}
.items {
background-color: rgb(96 139 168 / 0.2);
flex-shrink: 1;
width: 50px;
height: 50px;
}
#four {
width: 100px;
}
</style>
<div id="flexbox">
<div class="items">One</div>
<div class="items">Two</div>
<div class="items">Three</div>
<div class="items" id="four">Four</div>
<div class="items">Five</div>
<div class="items">Six</div>
<div class="items">Seven</div>
<div class="items">Eight</div>
</div>

View file

@ -0,0 +1,80 @@
<!DOCTYPE html>
<link rel="help" href="https://drafts.csswg.org/css-gaps-1/">
<link rel="author" title="Javier Contreras" href="mailto:javiercon@microsoft.com">
<style>
body {
margin: 0px;
}
#flexbox {
border: 2px solid rgb(96 139 168);
display: flex;
column-gap: 10px;
row-gap: 10px;
width: 170px;
flex-wrap: wrap;
}
.items {
background-color: rgb(96 139 168 / 0.2);
flex-shrink: 1;
width: 50px;
height: 50px;
}
#four {
width: 100px;
}
.row-gap {
margin: 0px;
padding: 0px;
height: 0px;
width: 170px;
border-bottom: 10px double;
border-color:blue;
position: absolute;
}
.column-gap {
display: flex;
flex-direction: column;
row-gap: 60px;
height: 170px;
top: 2px;
width: 10px;
position: absolute;
}
.column {
width: 0px;
border-left: 10px double red;
height: 55px;
}
</style>
<div id="flexbox">
<div class="items">One</div>
<div class="items">Two</div>
<div class="items">Three</div>
<div class="items" id="four">Four</div>
<div class="items">Five</div>
<div class="items">Six</div>
<div class="items">Seven</div>
<div class="items">Eight</div>
</div>
<div id="row1" class="row-gap" style="top: 52px; left: 2px;"></div>
<div id="row2" class="row-gap" style="top: 112px; left: 2px;"></div>
<div id="columns1" style="left: 52px;" class="column-gap">
<div id="c1" class="column"></div>
<div id="c2" class="column"></div>
</div>
<div id="columns2" style="left: 112px;" class="column-gap">
<div id="c1" class="column"></div>
<div id="c2" class="column"></div>
</div>
<div id="column3" style="left: 102px; position:absolute; top: 57px; height:60px;" class="column"></div>

View file

@ -0,0 +1,49 @@
<!DOCTYPE html>
<title>
CSS Gap Decorations: flex column and row gaps are painted with double styling.
</title>
<link rel="help" href="https://drafts.csswg.org/css-gaps-1/">
<link rel="match" href="flex-gap-decorations-004-ref.html">
<link rel="author" title="Javier Contreras" href="mailto:javiercon@microsoft.com">
<style>
body {
margin: 0px;
}
#flexbox {
border: 2px solid rgb(96 139 168);
display: flex;
column-gap: 10px;
row-gap: 10px;
row-rule-style: double;
row-rule-color: blue;
row-rule-width: 10px;
column-rule-style: double;
column-rule-color: red;
column-rule-width: 10px;
width: 170px;
flex-wrap: wrap;
}
.items {
background-color: rgb(96 139 168 / 0.2);
flex-shrink: 1;
width: 50px;
height: 50px;
}
#four {
width: 100px;
}
</style>
<div id="flexbox">
<div class="items">One</div>
<div class="items">Two</div>
<div class="items">Three</div>
<div class="items" id="four">Four</div>
<div class="items">Five</div>
<div class="items">Six</div>
<div class="items">Seven</div>
<div class="items">Eight</div>
</div>

View file

@ -0,0 +1,80 @@
<!DOCTYPE html>
<link rel="help" href="https://drafts.csswg.org/css-gaps-1/">
<link rel="author" title="Javier Contreras" href="mailto:javiercon@microsoft.com">
<style>
body {
margin: 0px;
}
#flexbox {
border: 2px solid rgb(96 139 168);
display: flex;
column-gap: 10px;
row-gap: 10px;
width: 170px;
flex-wrap: wrap;
}
.items {
background-color: rgb(96 139 168 / 0.2);
flex-shrink: 1;
width: 50px;
height: 50px;
}
#four {
width: 100px;
}
.row-gap {
margin: 0px;
padding: 0px;
height: 0px;
width: 170px;
left: 2px;
position: absolute;
border-bottom: 10px dotted blue;
}
.column-gap {
display: flex;
flex-direction: column;
row-gap: 60px;
height: 170px;
top: 2px;
width: 10px;
position: absolute;
}
.column {
width: 0px;
border-left: 10px dotted red;
height: 55px;
}
</style>
<div id="flexbox">
<div class="items">One</div>
<div class="items">Two</div>
<div class="items">Three</div>
<div class="items" id="four">Four</div>
<div class="items">Five</div>
<div class="items">Six</div>
<div class="items">Seven</div>
<div class="items">Eight</div>
</div>
<div class="row-gap" style="top: 52px"></div>
<div class="row-gap" style="top: 112px"></div>
<div id="columns1" style="left: 52px;" class="column-gap">
<div id="c1" class="column"></div>
<div id="c2" class="column"></div>
</div>
<div id="columns2" style="left: 112px;" class="column-gap">
<div id="c1" class="column"></div>
<div id="c2" class="column"></div>
</div>
<div id="column3" style="left: 102px; position:absolute; top: 57px; height:60px;" class="column"></div>

View file

@ -0,0 +1,49 @@
<!DOCTYPE html>
<title>
CSS Gap Decorations: flex column and row gaps are painted with dotted styling.
</title>
<link rel="help" href="https://drafts.csswg.org/css-gaps-1/">
<link rel="match" href="flex-gap-decorations-005-ref.html">
<link rel="author" title="Javier Contreras" href="mailto:javiercon@microsoft.com">
<style>
body {
margin: 0px;
}
#flexbox {
border: 2px solid rgb(96 139 168);
display: flex;
column-gap: 10px;
row-gap: 10px;
row-rule-style: dotted;
row-rule-color: blue;
row-rule-width: 10px;
column-rule-style: dotted;
column-rule-color: red;
column-rule-width: 10px;
width: 170px;
flex-wrap: wrap;
}
.items {
background-color: rgb(96 139 168 / 0.2);
flex-shrink: 1;
width: 50px;
height: 50px;
}
#four {
width: 100px;
}
</style>
<div id="flexbox">
<div class="items">One</div>
<div class="items">Two</div>
<div class="items">Three</div>
<div class="items" id="four">Four</div>
<div class="items">Five</div>
<div class="items">Six</div>
<div class="items">Seven</div>
<div class="items">Eight</div>
</div>

View file

@ -0,0 +1,65 @@
<!DOCTYPE html>
<link rel="help" href="https://drafts.csswg.org/css-gaps-1/">
<link rel="author" title="Javier Contreras" href="mailto:javiercon@microsoft.com">
<style>
body {
margin: 0px;
}
#flexbox>* {
background-color: rgb(96 139 168 / 0.2);
}
#flexbox {
border: 2px solid rgb(96 139 168);
border-width: 2px;
display: flex;
column-gap: 10px;
row-gap: 30px;
height: 300px;
width: 300px;
flex-wrap: wrap;
align-content: center;
writing-mode: vertical-lr;
}
.items {
width: 70px;
height: 70px;
}
.row-gap {
background-color: blue;
margin: 0px;
padding: 0px;
height: 300px;
width: 30px;
top: 2px;
left: 137px;
position: absolute;
}
.column-gap {
background-color: red;
margin: 0px;
padding: 0px;
height: 10px;
width: 170px;
left: 67px;
position: absolute;
}
</style>
<div id="flexbox">
<div class="items">One</div>
<div class="items">Two</div>
<div class="items">Three</div>
<div class="items">Four</div>
<div class="items">Five</div>
<div class="items">Six</div>
</div>
<div id="horizontal1" class="row-gap"></div>
<div id="column1" class="column-gap" style="top:72px;"></div>
<div id="column2" class="column-gap" style="top: 152px;"></div>

View file

@ -0,0 +1,49 @@
<!DOCTYPE html>
<title>
CSS Gap Decorations: flex column and row gaps are painted in vertical-lr and center aligned.
</title>
<link rel="help" href="https://drafts.csswg.org/css-gaps-1/">
<link rel="match" href="flex-gap-decorations-006-ref.html">
<link rel="author" title="Javier Contreras" href="mailto:javiercon@microsoft.com">
<style>
body {
margin: 0px;
}
#flexbox>* {
background-color: rgb(96 139 168 / 0.2);
}
#flexbox {
border: 2px solid rgb(96 139 168);
border-width: 2px;
display: flex;
column-gap: 10px;
column-rule-style: solid;
column-rule-width: 10px;
column-rule-color: red;
row-gap: 30px;
row-rule-style: solid;
row-rule-width: 30px;
row-rule-color: blue;
height: 300px;
width: 300px;
flex-wrap: wrap;
align-content: center;
writing-mode: vertical-lr;
}
.items {
width: 70px;
height: 70px;
}
</style>
<div id="flexbox">
<div class="items">One</div>
<div class="items">Two</div>
<div class="items">Three</div>
<div class="items">Four</div>
<div class="items">Five</div>
<div class="items">Six</div>
</div>

View file

@ -0,0 +1,50 @@
<!DOCTYPE html>
<link rel="help" href="https://drafts.csswg.org/css-gaps-1/">
<link rel="author" title="Javier Contreras" href="mailto:javiercon@microsoft.com">
<style>
body {
margin: 0px;
}
#flexbox>* {
background-color: rgb(96 139 168 / 0.2);
}
#flexbox {
border: 2px solid rgb(96 139 168);
border-width: 2px;
display: flex;
column-gap: 10px;
width: 170px;
flex-wrap: wrap;
align-items: flex-end;
}
.items {
width: 50px;
}
.column-gap {
background-color: red;
margin: 0px;
padding: 0px;
height: 10px;
width: 10px;
position: absolute;
top:2px;
height: 40px;
}
#three {
height: 40px;
}
</style>
<div id="flexbox">
<div class="items">One</div>
<div class="items">Two</div>
<div class="items" id="three">Three</div>
</div>
<div id="column1" class="column-gap" style="left: 52px;"></div>
<div id="column2" class="column-gap" style="left: 112px;"></div>

View file

@ -0,0 +1,43 @@
<!DOCTYPE html>
<title>
CSS Gap Decorations: flex column and row gaps are painted align-items.
</title>
<link rel="help" href="https://drafts.csswg.org/css-gaps-1/">
<link rel="match" href="flex-gap-decorations-007-ref.html">
<link rel="author" title="Javier Contreras" href="mailto:javiercon@microsoft.com">
<style>
body {
margin: 0px;
}
#flexbox>* {
background-color: rgb(96 139 168 / 0.2);
}
#flexbox {
border: 2px solid rgb(96 139 168);
border-width: 2px;
display: flex;
column-gap: 10px;
column-rule-style: solid;
column-rule-width: 10px;
column-rule-color: red;
width: 170px;
flex-wrap: wrap;
align-items: flex-end;
}
.items {
width: 50px;
}
#three {
height: 40px;
}
</style>
<div id="flexbox">
<div class="items">One</div>
<div class="items">Two</div>
<div class="items" id="three">Three</div>
</div>

View file

@ -0,0 +1,63 @@
<!DOCTYPE html>
<link rel="help" href="https://drafts.csswg.org/css-gaps-1/">
<link rel="author" title="Javier Contreras" href="mailto:javiercon@microsoft.com">
<style>
body {
margin: 0px;
}
#flexbox>* {
background-color: rgb(96 139 168 / 0.2);
}
#flexbox {
border: 2px solid rgb(96 139 168);
border-width: 2px;
display: flex;
column-gap: 10px;
width: 200px;
flex-wrap: nowrap;
}
.items {
width: 50px;
height: 50px;
flex-shrink: 0;
}
.column-gap {
display: flex;
margin: 0px;
padding: 0px;
height: 10px;
width: 300px;
position: absolute;
top:2px;
height: 50px;
left: 52px;
column-gap: 50px;
}
.columns {
background-color: red;
width: 10px;
height: 50px;
}
</style>
<div id="flexbox">
<div class="items">One</div>
<div class="items">Two</div>
<div class="items">Three</div>
<div class="items">Four</div>
<div class="items">Five</div>
<div class="items">Six</div>
</div>
<div class="column-gap">
<div class="columns"></div>
<div class="columns"></div>
<div class="columns"></div>
<div class="columns"></div>
<div class="columns"></div>
</div>

View file

@ -0,0 +1,43 @@
<!DOCTYPE html>
<title>
CSS Gap Decorations: flex column gaps are painted on overflowing items.
</title>
<link rel="help" href="https://drafts.csswg.org/css-gaps-1/">
<link rel="match" href="flex-gap-decorations-008-ref.html">
<link rel="author" title="Javier Contreras" href="mailto:javiercon@microsoft.com">
<style>
body {
margin: 0px;
}
#flexbox>* {
background-color: rgb(96 139 168 / 0.2);
}
#flexbox {
border: 2px solid rgb(96 139 168);
border-width: 2px;
display: flex;
column-gap: 10px;
column-rule-style: solid;
column-rule-width: 10px;
column-rule-color: red;
width: 200px;
flex-wrap: nowrap;
}
.items {
width: 50px;
height: 50px;
flex-shrink: 0;
}
</style>
<div id="flexbox">
<div class="items">One</div>
<div class="items">Two</div>
<div class="items">Three</div>
<div class="items">Four</div>
<div class="items">Five</div>
<div class="items">Six</div>
</div>

View file

@ -0,0 +1,95 @@
<!DOCTYPE html>
<link rel="help" href="https://drafts.csswg.org/css-gaps-1/">
<link rel="author" title="Javier Contreras" href="mailto:javiercon@microsoft.com">
<style>
body {
margin: 0px;
}
#flexbox {
border: 2px solid rgb(96 139 168);
display: flex;
column-gap: 10px;
row-gap: 10px;
width: 170px;
flex-wrap: wrap;
}
.items {
background-color: rgb(96 139 168 / 0.2);
flex-shrink: 1;
width: 50px;
height: 50px;
}
#four {
width: 100px;
}
.row-gap {
display: flex;
margin: 0px;
padding: 0px;
height: 10px;
width: 170px;
position: absolute;
column-gap: 10px
}
.row {
background: blue;
width: 50px;
height: 10px;
}
.column-gap {
display: flex;
flex-direction: column;
row-gap: 70px;
height: 170px;
top: 2px;
width: 10px;
position: absolute;
}
.column {
background: red;
width: 10px;
height: 50px;
}
</style>
<div id="flexbox">
<div class="items">One</div>
<div class="items">Two</div>
<div class="items">Three</div>
<div class="items" id="four">Four</div>
<div class="items">Five</div>
<div class="items">Six</div>
<div class="items">Seven</div>
<div class="items">Eight</div>
</div>
<div id="row1" class="row-gap" style="top: 52px; left: 2px;">
<div id="r1" class="row"></div>
<div id="r2" style="width: 40px" class="row"></div>
<div id="r2" style="margin-left: auto" class="row"></div>
</div>
<div id="row2" class="row-gap" style="top: 112px; left: 2px;">
<div id="r3" class="row"></div>
<div id="r4" style="width: 40px" class="row"></div>
<div id="r5" style="margin-left: auto" class="row"></div>
</div>
<div id="columns1" style="left: 52px;" class="column-gap">
<div id="c1" class="column"></div>
<div id="c2" class="column"></div>
</div>
<div id="columns2" style="left: 112px;" class="column-gap">
<div id="c1" class="column"></div>
<div id="c2" class="column"></div>
</div>
<div id="columns3" style="left: 102px; position:absolute; top: 62px; height:50px;" class="column"></div>

View file

@ -0,0 +1,53 @@
<!DOCTYPE html>
<title>
CSS Gap Decorations: flex column and row gaps are painted with intersection rule break.
</title>
<link rel="help" href="https://drafts.csswg.org/css-gaps-1/">
<link rel="match" href="flex-gap-decorations-009-ref.html">
<link rel="author" title="Javier Contreras" href="mailto:javiercon@microsoft.com">
<style>
body {
margin: 0px;
}
#flexbox {
border: 2px solid rgb(96 139 168);
display: flex;
column-gap: 10px;
row-gap: 10px;
row-rule-style: solid;
row-rule-color: blue;
row-rule-width: 10px;
row-rule-break: intersection;
row-rule-outset: 0;
column-rule-break: intersection;
column-rule-style: solid;
column-rule-color: red;
column-rule-width: 10px;
column-rule-outset: 0;
width: 170px;
flex-wrap: wrap;
}
.items {
background-color: rgb(96 139 168 / 0.2);
flex-shrink: 1;
width: 50px;
height: 50px;
}
#four {
width: 100px;
}
</style>
<div id="flexbox">
<div class="items">One</div>
<div class="items">Two</div>
<div class="items">Three</div>
<div class="items" id="four">Four</div>
<div class="items">Five</div>
<div class="items">Six</div>
<div class="items">Seven</div>
<div class="items">Eight</div>
</div>

View file

@ -0,0 +1,82 @@
<!DOCTYPE html>
<link rel="help" href="https://drafts.csswg.org/css-gaps-1/">
<link rel="author" title="Javier Contreras" href="mailto:javiercon@microsoft.com">
<style>
body {
margin: 0px;
}
#flexbox {
border: 2px solid rgb(96 139 168);
display: flex;
column-gap: 10px;
row-gap: 10px;
width: 170px;
flex-wrap: wrap;
}
.items {
background-color: rgb(96 139 168 / 0.2);
flex-shrink: 1;
width: 50px;
height: 50px;
}
#four {
width: 100px;
}
.row-gap {
margin: 0px;
padding: 0px;
height: 10px;
width: 170px;
position: absolute;
background: blue;
}
.column-gap {
display: flex;
flex-direction: column;
row-gap: 70px;
height: 170px;
top: 2px;
width: 10px;
position: absolute;
}
.column {
background: red;
width: 10px;
height: 50px;
}
</style>
<div id="flexbox">
<div class="items">One</div>
<div class="items">Two</div>
<div class="items">Three</div>
<div class="items" id="four">Four</div>
<div class="items">Five</div>
<div class="items">Six</div>
<div class="items">Seven</div>
<div class="items">Eight</div>
</div>
<div id="row1" class="row-gap" style="top: 52px; left: 2px;">
</div>
<div id="row2" class="row-gap" style="top: 112px; left: 2px;">
</div>
<div id="columns1" style="left: 52px;" class="column-gap">
<div id="c1" class="column"></div>
<div id="c2" class="column"></div>
</div>
<div id="columns2" style="left: 112px;" class="column-gap">
<div id="c1" class="column"></div>
<div id="c2" class="column"></div>
</div>
<div id="columns3" style="left: 102px; position:absolute; top: 62px; height:50px;" class="column"></div>

View file

@ -0,0 +1,51 @@
<!DOCTYPE html>
<title>
CSS Gap Decorations: flex column and row gaps are painted with intersection column rule break.
</title>
<link rel="help" href="https://drafts.csswg.org/css-gaps-1/">
<link rel="match" href="flex-gap-decorations-010-ref.html">
<link rel="author" title="Javier Contreras" href="mailto:javiercon@microsoft.com">
<style>
body {
margin: 0px;
}
#flexbox {
border: 2px solid rgb(96 139 168);
display: flex;
column-gap: 10px;
row-gap: 10px;
row-rule-style: solid;
row-rule-color: blue;
row-rule-width: 10px;
column-rule-break: intersection;
column-rule-style: solid;
column-rule-color: red;
column-rule-width: 10px;
column-rule-outset: 0;
width: 170px;
flex-wrap: wrap;
}
.items {
background-color: rgb(96 139 168 / 0.2);
flex-shrink: 1;
width: 50px;
height: 50px;
}
#four {
width: 100px;
}
</style>
<div id="flexbox">
<div class="items">One</div>
<div class="items">Two</div>
<div class="items">Three</div>
<div class="items" id="four">Four</div>
<div class="items">Five</div>
<div class="items">Six</div>
<div class="items">Seven</div>
<div class="items">Eight</div>
</div>

View file

@ -0,0 +1,79 @@
<!DOCTYPE html>
<link rel="help" href="https://drafts.csswg.org/css-gaps-1/">
<link rel="author" title="Javier Contreras" href="mailto:javiercon@microsoft.com">
<style>
body {
margin: 0px;
}
#flexbox {
border: 2px solid rgb(96 139 168);
display: flex;
column-gap: 10px;
row-gap: 10px;
width: 170px;
flex-wrap: wrap;
}
.items {
background-color: rgb(96 139 168 / 0.2);
flex-shrink: 1;
width: 50px;
height: 50px;
}
#four {
width: 100px;
}
.row-gap {
margin: 0px;
padding: 0px;
height: 2px;
background: blue;
width: 170px;
position: absolute;
}
.column-gap {
display: flex;
flex-direction: column;
row-gap: 66px;
height: 174px;
top: 0px;
width: 10px;
position: absolute;
}
.column {
background: red;
width: 2px;
height: 54px;
}
</style>
<div id="flexbox">
<div class="items">One</div>
<div class="items">Two</div>
<div class="items">Three</div>
<div class="items" id="four">Four</div>
<div class="items">Five</div>
<div class="items">Six</div>
<div class="items">Seven</div>
<div class="items">Eight</div>
</div>
<div id="row1" class="row-gap" style="top: 56px; left: 2px;"></div>
<div id="row2" class="row-gap" style="top: 116px; left: 2px;"></div>
<div id="columns1" style="left: 56px;" class="column-gap">
<div id="c1" class="column"></div>
<div id="c2" class="column"></div>
</div>
<div id="columns2" style="left: 116px;" class="column-gap">
<div id="c1" class="column"></div>
<div id="c2" class="column"></div>
</div>
<div id="columns3" style="left: 106px; position:absolute; top: 60px; height:54px;" class="column"></div>

View file

@ -0,0 +1,51 @@
<!DOCTYPE html>
<title>
CSS Gap Decorations: flex column and row gaps are painted column break intersection and 2px outset.
</title>
<link rel="help" href="https://drafts.csswg.org/css-gaps-1/">
<link rel="match" href="flex-gap-decorations-011-ref.html">
<link rel="author" title="Javier Contreras" href="mailto:javiercon@microsoft.com">
<style>
body {
margin: 0px;
}
#flexbox {
border: 2px solid rgb(96 139 168);
display: flex;
column-gap: 10px;
row-gap: 10px;
row-rule-style: solid;
row-rule-color: blue;
row-rule-width: 2px;
column-rule-style: solid;
column-rule-color: red;
column-rule-width: 2px;
column-rule-break: intersection;
column-rule-outset: 2px;
width: 170px;
flex-wrap: wrap;
}
.items {
background-color: rgb(96 139 168 / 0.2);
flex-shrink: 1;
width: 50px;
height: 50px;
}
#four {
width: 100px;
}
</style>
<div id="flexbox">
<div class="items">One</div>
<div class="items">Two</div>
<div class="items">Three</div>
<div class="items" id="four">Four</div>
<div class="items">Five</div>
<div class="items">Six</div>
<div class="items">Seven</div>
<div class="items">Eight</div>
</div>

View file

@ -0,0 +1,79 @@
<!DOCTYPE html>
<link rel="help" href="https://drafts.csswg.org/css-gaps-1/">
<link rel="author" title="Javier Contreras" href="mailto:javiercon@microsoft.com">
<style>
body {
margin: 0px;
}
#flexbox {
border: 2px solid rgb(96 139 168);
display: flex;
column-gap: 10px;
row-gap: 10px;
width: 170px;
flex-wrap: wrap;
}
.items {
background-color: rgb(96 139 168 / 0.2);
flex-shrink: 1;
width: 50px;
height: 50px;
}
#four {
width: 100px;
}
.row-gap {
margin: 0px;
padding: 0px;
height: 2px;
background: blue;
width: 170px;
position: absolute;
}
.column-gap {
display: flex;
flex-direction: column;
row-gap: 74px;
height: 174px;
top: 4px;
width: 10px;
position: absolute;
}
.column {
background: red;
width: 2px;
height: 46px;
}
</style>
<div id="flexbox">
<div class="items">One</div>
<div class="items">Two</div>
<div class="items">Three</div>
<div class="items" id="four">Four</div>
<div class="items">Five</div>
<div class="items">Six</div>
<div class="items">Seven</div>
<div class="items">Eight</div>
</div>
<div id="row1" class="row-gap" style="top: 56px; left: 2px;"></div>
<div id="row2" class="row-gap" style="top: 116px; left: 2px;"></div>
<div id="columns1" style="left: 56px;" class="column-gap">
<div id="c1" class="column"></div>
<div id="c2" class="column"></div>
</div>
<div id="columns2" style="left: 116px;" class="column-gap">
<div id="c1" class="column"></div>
<div id="c2" class="column"></div>
</div>
<div id="columns3" style="left: 106px; position:absolute; top: 64px; height:46px;" class="column"></div>

View file

@ -0,0 +1,51 @@
<!DOCTYPE html>
<title>
CSS Gap Decorations: flex column and row gaps are painted column break intersection and -2px outset.
</title>
<link rel="help" href="https://drafts.csswg.org/css-gaps-1/">
<link rel="match" href="flex-gap-decorations-013-ref.html">
<link rel="author" title="Javier Contreras" href="mailto:javiercon@microsoft.com">
<style>
body {
margin: 0px;
}
#flexbox {
border: 2px solid rgb(96 139 168);
display: flex;
column-gap: 10px;
row-gap: 10px;
row-rule-style: solid;
row-rule-color: blue;
row-rule-width: 2px;
column-rule-style: solid;
column-rule-color: red;
column-rule-width: 2px;
column-rule-break: intersection;
column-rule-outset: -2px;
width: 170px;
flex-wrap: wrap;
}
.items {
background-color: rgb(96 139 168 / 0.2);
flex-shrink: 1;
width: 50px;
height: 50px;
}
#four {
width: 100px;
}
</style>
<div id="flexbox">
<div class="items">One</div>
<div class="items">Two</div>
<div class="items">Three</div>
<div class="items" id="four">Four</div>
<div class="items">Five</div>
<div class="items">Six</div>
<div class="items">Seven</div>
<div class="items">Eight</div>
</div>

View file

@ -0,0 +1,79 @@
<!DOCTYPE html>
<link rel="help" href="https://drafts.csswg.org/css-gaps-1/">
<link rel="author" title="Javier Contreras" href="mailto:javiercon@microsoft.com">
<style>
body {
margin: 0px;
}
#flexbox {
border: 2px solid rgb(96 139 168);
display: flex;
column-gap: 10px;
row-gap: 10px;
width: 170px;
flex-wrap: wrap;
}
.items {
background-color: rgb(96 139 168 / 0.2);
flex-shrink: 1;
width: 50px;
height: 50px;
}
#four {
width: 100px;
}
.row-gap {
margin: 0px;
padding: 0px;
height: 2px;
background: blue;
width: 170px;
position: absolute;
}
.column-gap {
display: flex;
flex-direction: column;
row-gap: 50px;
height: 174px;
top: 2px;
width: 10px;
position: absolute;
}
.column {
background: red;
width: 2px;
height: 60px;
}
</style>
<div id="flexbox">
<div class="items">One</div>
<div class="items">Two</div>
<div class="items">Three</div>
<div class="items" id="four">Four</div>
<div class="items">Five</div>
<div class="items">Six</div>
<div class="items">Seven</div>
<div class="items">Eight</div>
</div>
<div id="row1" class="row-gap" style="top: 56px; left: 2px;"></div>
<div id="row2" class="row-gap" style="top: 116px; left: 2px;"></div>
<div id="columns1" style="left: 56px;" class="column-gap">
<div id="c1" class="column"></div>
<div id="c2" class="column"></div>
</div>
<div id="columns2" style="left: 116px;" class="column-gap">
<div id="c1" class="column"></div>
<div id="c2" class="column"></div>
</div>
<div id="columns3" style="left: 106px; position:absolute; top: 52px; height:70px;" class="column"></div>

View file

@ -0,0 +1,51 @@
<!DOCTYPE html>
<title>
CSS Gap Decorations: flex column and row gaps are painted column break intersection and 100% outset.
</title>
<link rel="help" href="https://drafts.csswg.org/css-gaps-1/">
<link rel="match" href="flex-gap-decorations-014-ref.html">
<link rel="author" title="Javier Contreras" href="mailto:javiercon@microsoft.com">
<style>
body {
margin: 0px;
}
#flexbox {
border: 2px solid rgb(96 139 168);
display: flex;
column-gap: 10px;
row-gap: 10px;
row-rule-style: solid;
row-rule-color: blue;
row-rule-width: 2px;
column-rule-style: solid;
column-rule-color: red;
column-rule-width: 2px;
column-rule-break: intersection;
column-rule-outset: 100%;
width: 170px;
flex-wrap: wrap;
}
.items {
background-color: rgb(96 139 168 / 0.2);
flex-shrink: 1;
width: 50px;
height: 50px;
}
#four {
width: 100px;
}
</style>
<div id="flexbox">
<div class="items">One</div>
<div class="items">Two</div>
<div class="items">Three</div>
<div class="items" id="four">Four</div>
<div class="items">Five</div>
<div class="items">Six</div>
<div class="items">Seven</div>
<div class="items">Eight</div>
</div>

View file

@ -0,0 +1,46 @@
<!DOCTYPE html>
<title>
CSS Gap Decorations: flex column and row gaps are painted column flex direction
</title>
<link rel="help" href="https://drafts.csswg.org/css-gaps-1/">
<link rel="match" href="flex-gap-decorations-014-ref.html">
<link rel="author" title="Javier Contreras" href="mailto:javiercon@microsoft.com">
<style>
body {
margin: 0px;
}
#flexbox {
border: 2px solid rgb(96 139 168);
display: flex;
column-gap: 20px;
row-gap: 10px;
width: 120px;
height: 170px;
flex-wrap: wrap;
flex-direction: column;
column-rule-style: solid;
column-rule-color: red;
column-rule-width: 20px;
row-rule-style: solid;
row-rule-color: blue;
row-rule-width: 10px;
}
.items {
background-color: rgb(96 139 168 / 0.2);
flex-shrink: 1;
width: 50px;
height: 50px;
}
</style>
<div id="flexbox">
<div class="items">One</div>
<div class="items">Two</div>
<div class="items">Three</div>
<div class="items">Four</div>
<div class="items">Five</div>
<div class="items">Six</div>
</div>

View file

@ -3,7 +3,7 @@
CSS Gap Decorations: grid column gaps are painted with solid styling.
</title>
<link rel="help" href="https://drafts.csswg.org/css-gaps-1/">
<link rel="match" href="grid-gap-decorations-002-ref.html">
<link rel="match" href="../agnostic/gap-decorations-001-ref.html">
<link rel="author" title="Sam Davis Omekara Jr." href="mailto:samomekarajr@microsoft.com">
<style>
.grid-container {

View file

@ -0,0 +1,25 @@
<!DOCTYPE html>
<link rel="author" title="CGQAQ" href="mailto:m.jason.liu@gmail.com">
<link rel="author" title="一丝" href="mailto:yiorsi@gmail.com">
<title>All the boxes below should have the lime background.</title>
<style>
.box {
display: flex;
flex-wrap: wrap;
gap: 10px;
}
.box > div {
width: 100px;
height: 100px;
border: solid 1px black;
background-color: lime;
}
</style>
<div class="box">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>

View file

@ -0,0 +1,40 @@
<!DOCTYPE html>
<link rel="match" href="gradient-infinity-001-ref.html">
<link rel="author" title="CGQAQ" href="mailto:m.jason.liu@gmail.com">
<link rel="author" title="一丝" href="mailto:yiorsi@gmail.com">
<link rel="help" href="https://www.w3.org/TR/css-color-4/#interpolation">
<title>All the boxes below should have the lime background.</title>
<style>
.box {
display: flex;
flex-wrap: wrap;
gap: 10px;
}
.box > div {
width: 100px;
height: 100px;
border: solid 1px black;
}
.test1 {
background: linear-gradient(to right in srgb, lime 100px, red calc(1px / 0));
}
.test2 {
background: linear-gradient(to right in srgb, lime 100px, red calc(Infinity * 1px));
}
.test3 {
background: linear-gradient(to left in srgb, lime 100px, red calc(Infinity * 1px));
}
.test4 {
background: linear-gradient(to top in srgb, lime 100px, red calc(1px / 0));
}
.test5 {
background: linear-gradient(to bottom in srgb, lime 100px, red calc(Infinity * 1px));
}
</style>
<div class="box">
<div class="test1"></div>
<div class="test2"></div>
<div class="test3"></div>
<div class="test4"></div>
<div class="test5"></div>
</div>

View file

@ -0,0 +1,25 @@
<!DOCTYPE html>
<link rel="author" title="CGQAQ" href="mailto:m.jason.liu@gmail.com">
<link rel="author" title="一丝" href="mailto:yiorsi@gmail.com">
<title>All boxes should have a lime background.</title>
<style>
.box {
display: flex;
flex-wrap: wrap;
gap: 10px;
}
.box > div {
width: 100px;
height: 100px;
border: solid 1px black;
padding: 1px;
background-color: lime;
}
</style>
<div class="box">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>

View file

@ -0,0 +1,41 @@
<!DOCTYPE html>
<link rel="match" href="gradient-infinity-002-ref.html">
<link rel="author" title="CGQAQ" href="mailto:m.jason.liu@gmail.com">
<link rel="author" title="一丝" href="mailto:yiorsi@gmail.com">
<link rel="help" href="https://www.w3.org/TR/css-color-4/#interpolation">
<title>All boxes should have a lime background.</title>
<style>
.box {
display: flex;
flex-wrap: wrap;
gap: 10px;
}
.box > div {
width: 100px;
height: 100px;
border: solid 1px black;
padding: 1px;
}
.test1 {
background: linear-gradient(to right in srgb, lime 100px, red calc(1px / 0));
}
.test2 {
background: linear-gradient(to right in srgb, lime 100px, red calc(Infinity * 1px));
}
.test3 {
background: linear-gradient(to left in srgb, lime 100px, red calc(Infinity * 1px));
}
.test4 {
background: linear-gradient(to top in srgb, lime 100px, red calc(1px / 0));
}
.test5 {
background: linear-gradient(to bottom in srgb, lime 100px, red calc(Infinity * 1px));
}
</style>
<div class="box">
<div class="test1"></div>
<div class="test2"></div>
<div class="test3"></div>
<div class="test4"></div>
<div class="test5"></div>
</div>

View file

@ -0,0 +1,13 @@
<!doctype html>
<meta charset="utf-8">
<title>CSS Overflow: test scrollbar-gutter with background gradient</title>
<link rel="author" title="CGQAQ" href="mailto:m.jason.liu@gmail.com">
<link rel="help" href="https://drafts.csswg.org/css-overflow-4/#scrollbar-gutter-property">
<style>
html {
scrollbar-gutter: stable both-edges;
background-image: linear-gradient(to right, green, blue);
position: fixed;
inset: 0;
}
</style>

View file

@ -0,0 +1,13 @@
<!doctype html>
<meta charset="utf-8">
<title>CSS Overflow: test scrollbar-gutter with background gradient</title>
<link rel="author" title="CGQAQ" href="mailto:m.jason.liu@gmail.com">
<link rel="help" href="https://drafts.csswg.org/css-overflow-4/#scrollbar-gutter-property">
<link rel="match" href="scrollbar-gutter-with-background-gradient-ref.html">
<meta name=fuzzy content="maxDifference=0-1;totalPixels=0-70000">
<style>
html {
scrollbar-gutter: stable both-edges;
background-image: linear-gradient(to right, green, blue);
}
</style>

View file

@ -0,0 +1,8 @@
<!DOCTYPE html>
<meta charset="utf-8">
<title>crbug.com/402200344</title>
<ruby><i>
<object classid="5Ygt" name="NEefr" type="text/javascript"><fieldset style="display:contents;"><header></header>
</object>
</i>
<rt>ô6Ì9ºÍ¶æ</ruby>

View file

@ -0,0 +1,6 @@
features:
- name: css-typed-om
files: "**"
- name: numeric-factory-functions
files:
- factory-*

View file

@ -6,22 +6,38 @@
<style>
#t1 {
font-size: 20px;
cursor: url(cur.ico) calc(7 * sign(1em - 18px)) 0, auto;
cursor: url(data:image/x-icon,) calc(7 * sign(1em - 18px)) 0, auto;
}
#t2 {
cursor: url(cur.ico) calc(4 * sibling-index()) 0, auto;
cursor: url(data:image/x-icon,) calc(4 * sibling-index()) 0, auto;
}
#t3 {
cursor: url(data:image/x-icon,) calc(9) 0, auto;
}
#t4 {
cursor: url(data:image/x-icon,) calc(10 * sign(2px)) 0, auto;
}
</style>
<div>
<div id="t1"></div>
<div id="t2"></div>
<div id="t3"></div>
<div id="t4"></div>
</div>
<script>
test(() => {
assert_equals(getComputedStyle(t1).cursor, "url(cur.ico) 7 0, auto");
assert_equals(getComputedStyle(t1).cursor, 'url("data:image/x-icon,") 7 0, auto');
}, "cursor hotspot with sign() depending on font relative units");
test(() => {
assert_equals(getComputedStyle(t2).cursor, "url(cur.ico) 8 0, auto");
assert_equals(getComputedStyle(t2).cursor, 'url("data:image/x-icon,") 8 0, auto');
}, "cursor hotspot depending on sibling-index()");
test(() => {
assert_equals(getComputedStyle(t3).cursor, 'url("data:image/x-icon,") 9 0, auto');
}, "cursor hotspot depending on simplified numeric calc()");
test(() => {
assert_equals(getComputedStyle(t4).cursor, 'url("data:image/x-icon,") 10 0, auto');
}, "cursor hotspot depending on simplified numeric calc() with sign()");
</script>

View file

@ -1,3 +1,7 @@
features:
- name: view-transitions
files: "**"
- name: view-transition-class
files:
- class-specificity.html
- pseudo-with-classes-*

View file

@ -21,7 +21,10 @@ main:active-view-transition #target {
background: red;
}
::view-transition-group(*) {
::view-transition-group(*),
::view-transition-image-pair(*),
::view-transition-old(*),
::view-transition-new(*) {
animation-play-state: paused;
}
</style>

View file

@ -21,7 +21,10 @@ main:active-view-transition-type(type-name) #target {
background: red;
}
::view-transition-group(*) {
::view-transition-group(*),
::view-transition-image-pair(*),
::view-transition-old(*),
::view-transition-new(*) {
animation-play-state: paused;
}
</style>

View file

@ -0,0 +1,3 @@
features:
- name: cross-document-view-transitions
files: "**"

View file

@ -5,6 +5,7 @@
<link rel="author" href="mailto:vmpstr@chromium.org">
<style>
body { background: lightgreen; }
#clipper {
overflow: clip;
height: 200px;

View file

@ -4,7 +4,7 @@
<link rel="help" href="https://drafts.csswg.org/css-view-transitions-2/">
<link rel="author" href="mailto:vmpstr@chromium.org">
<link rel="match" href="nested-root-capture-with-clip-ref.html">
<meta name=fuzzy content="maxDifference=0-40; totalPixels=0-400">
<meta name=fuzzy content="maxDifference=0-40; totalPixels=0-500">
<script src="/common/reftest-wait.js"></script>
<script src="/dom/events/scrolling/scroll_support.js"></script>
@ -32,7 +32,7 @@
will-change: transform;
}
::view-transition-group(clipper) {
animation-play-state: pause;
animation-play-state: paused;
}
::view-transition-new(clipper) {
animation: unset;
@ -45,6 +45,9 @@
::view-transition-group(*.item) {
display: none;
}
::view-transition {
background: lightgreen;
}
</style>
<div id=clipper>

View file

@ -0,0 +1,4 @@
features:
- name: view-transition-class
files:
- view-transition-class-*

View file

@ -28,8 +28,11 @@ div {
background: darkseagreen;
}
::view-transition-group(*) {
animation-duration: 50s;
::view-transition-group(*),
::view-transition-image-pair(*),
::view-transition-old(*),
::view-transition-new(*) {
animation-play-state: paused;
}
::view-transition {

View file

@ -0,0 +1,22 @@
<!DOCTYPE html>
<style>
.test {
width: 100px;
height: 100px;
background: green;
}
#container {
display: flex;
flex-direction: row;
gap: 10px;
}
body { background: lightpink; }
</style>
<div id="container">
<div class="test"></div>
<div class="test"></div>
</div>

View file

@ -0,0 +1,76 @@
<!DOCTYPE html>
<html class="reftest-wait">
<title>View transitions: active-view-transition-type should treat types as case-sensitive</title>
<link rel="help" href="https://drafts.csswg.org/css-view-transitions-2/#the-active-view-transition-type-pseudo">
<link rel="author" href="mailto:kiet.ho@apple.com">
<link rel="match" href="view-transition-types-matches-case-sensitive-ref.html">
<script src="/common/reftest-wait.js"></script>
<style>
html:active-view-transition-type(foo) #positive1 { background: green; }
html:active-view-transition-type(Foo) #positive1 { background: red; }
html:active-view-transition-type(FoO) #positive1 { background: magenta; }
html:active-view-transition-type(FOo) #positive1 { background: black; }
html:active-view-transition-type(Bar) #positive2 { background: green; }
html:active-view-transition-type(bar) #positive2 { background: red; }
html:active-view-transition-type(bAr) #positive2 { background: magenta; }
html:active-view-transition-type(baR) #positive2 { background: black; }
#positive1 { view-transition-name: positive1; background: yellow; }
#positive2 { view-transition-name: positive2; background: yellow; }
.test {
width: 100px;
height: 100px;
}
#container {
display: flex;
flex-direction: row;
gap: 10px;
}
html::view-transition-group(*) {
animation-play-state: paused;
}
html::view-transition-new(*) {
animation: unset;
opacity: 0;
}
html::view-transition-old(*) {
animation: unset;
opacity: 1;
}
html::view-transition-group(root) {
display: none;
}
html::view-transition { background: lightpink; }
</style>
<div id="container">
<div class="test" id="positive1"></div>
<div class="test" id="positive2"></div>
</div>
<script>
failIfNot(document.startViewTransition, "Missing document.startViewTransition");
function runTest() {
let transition = document.startViewTransition({
types: ["foo", "Bar"]
});
transition.ready.then(takeScreenshot);
}
onload = () => requestAnimationFrame(() => requestAnimationFrame(runTest));
</script>
</html>

View file

@ -111,7 +111,7 @@ function runTest(config,qualifier) {
closeMethodPromise.then(onClosed);
Promise.all([ closedAttributePromise, closeMethodPromise ]).then(function() {
test.step_func(onAllClosed);
test.step_func(onAllClosed)();
}).catch(onFailure);
}
}

View file

@ -23,7 +23,7 @@ class BadRequestError(Exception):
def main(request, response):
try:
if fledge_http_server_util.handle_cors_headers_and_preflight(request, response):
if fledge_http_server_util.handle_cors_headers_fail_if_preflight(request, response):
return
# Verify that Sec-Ad-Auction-Fetch is present

View file

@ -8,7 +8,7 @@ from fledge.tentative.resources import fledge_http_server_util
# injected in them. generateBid() will by default return a bid of 9 for the
# first ad.
def main(request, response):
if fledge_http_server_util.handle_cors_headers_and_preflight(request, response):
if fledge_http_server_util.handle_cors_headers_fail_if_preflight(request, response):
return
error = request.GET.first(b"error", None)

View file

@ -2,6 +2,17 @@
from collections import namedtuple
from urllib.parse import unquote_plus, urlparse
def fail(response, body):
"""Sets up response to fail with the provided response body.
Args:
response: the wptserve Response that was passed to main
body: the HTTP response body to use
"""
response.status = (400, "Bad Request")
response.headers.set(b"Content-Type", b"text/plain")
response.content = body
def headers_to_ascii(headers):
"""Converts a header map with binary values to one with ASCII values.
@ -22,18 +33,15 @@ def headers_to_ascii(headers):
header_map[pair[0].decode("ASCII")] = values
return header_map
def handle_cors_headers_and_preflight(request, response):
"""Applies CORS logic common to many entrypoints.
def attach_origin_and_credentials_headers(request, response):
"""Attaches Access-Control-Allow-Origin and Access-Control-Allow-Credentials
response headers to a response, if the request indicates they're needed.
Only intended for internal use.
Args:
request: the wptserve Request that was passed to main
response: the wptserve Response that was passed to main
Returns True if the request is a CORS preflight, which is entirely handled by
this function, so that the calling function should immediately return.
"""
# Append CORS headers if needed
if b"origin" in request.headers:
response.headers.set(b"Access-Control-Allow-Origin",
request.headers.get(b"origin"))
@ -42,20 +50,50 @@ def handle_cors_headers_and_preflight(request, response):
response.headers.set(b"Access-Control-Allow-Credentials",
request.headers.get(b"credentials"))
def handle_cors_headers_fail_if_preflight(request, response):
"""Adds CORS headers if necessary. In the case of CORS preflights, generates
a failure response. To be used when CORS preflights are not expected.
Args:
request: the wptserve Request that was passed to main
response: the wptserve Response that was passed to main
Returns True if the request is a CORS preflight, in which case the calling
function should immediately return.
"""
# Handle CORS preflight requests.
if request.method == u"OPTIONS":
fail(response, "CORS preflight unexpectedly received.")
return True
# Append CORS headers if needed
attach_origin_and_credentials_headers(request, response)
return False
def handle_cors_headers_and_preflight(request, response):
"""Applies CORS logic, either adding CORS headers to response or generating
an entire response to preflights.
Args:
request: the wptserve Request that was passed to main
response: the wptserve Response that was passed to main
Returns True if the request is a CORS preflight, in which case the calling
function should immediately return.
"""
# Append CORS headers if needed
attach_origin_and_credentials_headers(request, response)
# Handle CORS preflight requests.
if not request.method == u"OPTIONS":
return False
if not b"Access-Control-Request-Method" in request.headers:
response.status = (400, b"Bad Request")
response.headers.set(b"Content-Type", b"text/plain")
response.content = "Failed to get access-control-request-method in preflight!"
fail(response, "Failed to get access-control-request-method in preflight!")
return True
if not b"Access-Control-Request-Headers" in request.headers:
response.status = (400, b"Bad Request")
response.headers.set(b"Content-Type", b"text/plain")
response.content = "Failed to get access-control-request-headers in preflight!"
fail(response, "Failed to get access-control-request-headers in preflight!")
return True
response.headers.set(b"Access-Control-Allow-Methods",

View file

@ -35,7 +35,7 @@ def get_permissions(request, response):
- 天気の良い日 / élève: allow both join and leave
- anything else (including no subdomain): returns a 404
"""
if fledge_http_server_util.handle_cors_headers_and_preflight(request, response):
if fledge_http_server_util.handle_cors_headers_fail_if_preflight(request, response):
return
first_domain_label = re.search(r"[^.]*", request.url_parts.netloc).group(0)

View file

@ -20,10 +20,12 @@ def main(request, response):
for param in request.url_parts.query.split("&"):
pair = param.split("=", 1)
if len(pair) != 2:
return fail(response, "Bad query parameter: " + param)
fail(response, "Bad query parameter: " + param)
return
# Browsers should escape query params consistently.
if "%20" in pair[1]:
return fail(response, "Query parameter should escape using '+': " + param)
fail(response, "Query parameter should escape using '+': " + param)
return
# Hostname can't be empty. The empty string can be a key or interest group name, though.
if pair[0] == "hostname" and hostname == None and len(pair[1]) > 0:
@ -37,20 +39,22 @@ def main(request, response):
continue
if pair[0] == "slotSize" or pair[0] == "allSlotsRequestedSizes":
continue
return fail(response, "Unexpected query parameter: " + param)
fail(response, "Unexpected query parameter: " + param)
return
# If trusted signal keys are passed in, and one of them is "cors",
# add appropriate Access-Control-* headers to normal requests, and handle
# CORS preflights.
if keys and "cors" in keys and fledge_http_server_util.handle_cors_headers_and_preflight(
# add appropriate Access-Control-* headers to normal requests.
if keys and "cors" in keys and fledge_http_server_util.handle_cors_headers_fail_if_preflight(
request, response):
return
# "interestGroupNames" and "hostname" are mandatory.
if not hostname:
return fail(response, "hostname missing")
fail(response, "hostname missing")
return
if not interestGroupNames:
return fail(response, "interestGroupNames missing")
fail(response, "interestGroupNames missing")
return
response.status = (200, b"OK")
@ -153,8 +157,3 @@ def main(request, response):
if body != None:
return body
return json.dumps(responseBody)
def fail(response, body):
response.status = (400, "Bad Request")
response.headers.set(b"Content-Type", b"text/plain")
return body

View file

@ -13,7 +13,8 @@ def main(request, response):
try:
params = fledge_http_server_util.decode_trusted_scoring_signals_params(request)
except ValueError as ve:
return fail(response, str(ve))
fail(response, str(ve))
return
response.status = (200, b"OK")
@ -36,7 +37,8 @@ def main(request, response):
try:
signalsParams = fledge_http_server_util.decode_render_url_signals_params(renderUrl)
except ValueError as ve:
return fail(response, str(ve))
fail(response, str(ve))
return
for signalsParam in signalsParams:
if signalsParam == "close-connection":
@ -92,8 +94,8 @@ def main(request, response):
responseBody[urlList["type"]][renderUrl] = value
# If the signalsParam embedded inside a render URL calls for CORS, add
# appropriate response headers, and fully handle preflights.
if cors and fledge_http_server_util.handle_cors_headers_and_preflight(
# appropriate response headers.
if cors and fledge_http_server_util.handle_cors_headers_fail_if_preflight(
request, response):
return
@ -107,8 +109,3 @@ def main(request, response):
if body != None:
return body
return json.dumps(responseBody)
def fail(response, body):
response.status = (400, "Bad Request")
response.headers.set(b"Content-Type", b"text/plain")
return body

View file

@ -0,0 +1,20 @@
<!DOCTYPE HTML>
<html>
<head>
<title>history pushState too many calls</title>
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
</head>
<body>
<div id="log"></div>
<script>
test(function () {
assert_throws_dom("SecurityError", function () {
for (let i = 0; i < 500; i++) {
window.history.pushState(null, null, i);
}
});
});
</script>
</body>
</html>

View file

@ -0,0 +1,20 @@
<!DOCTYPE HTML>
<html>
<head>
<title>history replaceState too many calls</title>
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
</head>
<body>
<div id="log"></div>
<script>
test(function () {
assert_throws_dom("SecurityError", function () {
for (let i = 0; i < 500; i++) {
window.history.replaceState(null, null, i);
}
});
});
</script>
</body>
</html>

View file

@ -0,0 +1,90 @@
// META: timeout=long
// META: variant=?document
// META: variant=?dedicated_worker
// META: variant=?shared_worker
// META: variant=?service_worker
// META: script=/common/get-host-info.sub.js
// META: script=/common/utils.js
// META: script=/common/dispatcher/dispatcher.js
// META: script=/service-workers/service-worker/resources/test-helpers.sub.js
// META: script=./resources/common.js
// Fetch a resource and store it into CacheStorage from |storer| context. Then
// check if it can be retrieved via CacheStorage.match from |retriever| context.
const cacheStorageTest = (
description,
dip_storer,
dip_retriever,
resource_headers,
request_credential_mode,
expectation
) => {
promise_test(async test => {
const cross_origin = get_host_info().HTTPS_REMOTE_ORIGIN;
const resource_url = cross_origin + "/common/square.png?pipe=" + resource_headers;
// Create the storer and retriever contexts.
const storage_token = await getTokenFromEnvironment(test, environment, dip_storer);
const storage_context = new RemoteContext(storage_token);
const retriever_token = await getTokenFromEnvironment(test, environment, dip_retriever);
const retriever_context = new RemoteContext(retriever_token);
// Fetch a request from the storer. Store the opaque response into
// CacheStorage.
const stored = await storage_context.execute_script(
async (url, credential_mode) => {
const cache = await caches.open('v1');
const fetch_request = new Request(url, {
mode: 'no-cors',
credentials: credential_mode
});
const fetch_response = await fetch(fetch_request);
await cache.put(fetch_request, fetch_response);
return true;
}, [resource_url, request_credential_mode]);
assert_equals(stored, true);
// Retrieved it from |retriever|.
const was_retrieved = await retriever_context.execute_script(
async (url) => {
const cache = await caches.open('v1');
try {
const response = await cache.match(url);
return "retrieved";
} catch (error) {
return "error";
}
}, [resource_url]);
assert_equals(was_retrieved, expectation);
}, description);
};
// Execute the same set of tests for every type of execution contexts:
// Documents, DedicatedWorkers, SharedWorkers, and ServiceWorkers. The results
// should be independent of the context.
const environment = location.search.substr(1);
cacheStorageTest(`[${environment}] isolate-and-credentialless => none`,
dip_credentialless,
dip_none,
"",
"include",
"retrieved");
cacheStorageTest(`[${environment}] isolate-and-credentialless => isolate-and-credentialless`,
dip_credentialless,
dip_credentialless,
"",
"include",
"retrieved");
cacheStorageTest(`[${environment}] isolate-and-credentialless => isolate-and-require-corp`,
dip_credentialless,
dip_require_corp,
"",
"include",
"error");
cacheStorageTest(`[${environment}] isolate-and-credentialless => isolate-and-require-corp + CORP`,
dip_credentialless,
dip_require_corp,
corp_cross_origin,
"include",
"retrieved");

View file

@ -0,0 +1,108 @@
// META: timeout=long
// META: variant=?document
// META: variant=?dedicated_worker
// META: variant=?shared_worker
// META: variant=?service_worker
// META: script=/common/get-host-info.sub.js
// META: script=/common/utils.js
// META: script=/common/dispatcher/dispatcher.js
// META: script=/service-workers/service-worker/resources/test-helpers.sub.js
// META: script=./resources/common.js
// Fetch a resource and store it into CacheStorage from |storer| context. Then
// check if it can be retrieved via CacheStorage.match from |retriever| context.
const cacheStorageTest = (
description,
dip_storer,
dip_retriever,
resource_headers,
request_credential_mode,
expectation
) => {
promise_test(async test => {
const cross_origin = get_host_info().HTTPS_REMOTE_ORIGIN;
const resource_url = cross_origin + "/common/square.png?pipe=" + resource_headers;
// Create the storer and retriever contexts.
const storage_token = await getTokenFromEnvironment(test, environment, dip_storer);
const storage_context = new RemoteContext(storage_token);
const retriever_token = await getTokenFromEnvironment(test, environment, dip_retriever);
const retriever_context = new RemoteContext(retriever_token);
// Fetch a request from the storer. Store the opaque response into
// CacheStorage.
const stored = await storage_context.execute_script(
async (url, credential_mode) => {
const cache = await caches.open('v1');
const fetch_request = new Request(url, {
mode: 'no-cors',
credentials: credential_mode
});
const fetch_response = await fetch(fetch_request);
await cache.put(fetch_request, fetch_response);
return true;
}, [resource_url, request_credential_mode]);
assert_equals(stored, true);
// Retrieved it from |retriever|.
const was_retrieved = await retriever_context.execute_script(
async (url) => {
const cache = await caches.open('v1');
try {
const response = await cache.match(url);
return "retrieved";
} catch (error) {
return "error";
}
}, [resource_url]);
assert_equals(was_retrieved, expectation);
}, description);
};
// Execute the same set of tests for every type of execution contexts:
// Documents, DedicatedWorkers, SharedWorkers, and ServiceWorkers. The results
// should be independent of the context.
const environment = location.search.substr(1);
cacheStorageTest(`[${environment}] none => none`,
dip_none,
dip_none,
"",
"include",
"retrieved");
cacheStorageTest(`[${environment}] none => isolate-and-credentialless`,
dip_none,
dip_credentialless,
"",
"include",
"error");
cacheStorageTest(`[${environment}] none => isolate-and-credentialless (omit)`,
dip_none,
dip_credentialless,
"",
"omit",
"retrieved");
cacheStorageTest(`[${environment}] none => isolate-and-credentialless + CORP`,
dip_none,
dip_credentialless,
corp_cross_origin,
"include",
"retrieved");
cacheStorageTest(`[${environment}] none => isolate-and-require-corp`,
dip_none,
dip_require_corp,
"",
"include",
"error");
cacheStorageTest(`[${environment}] none => isolate-and-require-corp (omit)`,
dip_none,
dip_require_corp,
"",
"include",
"error");
cacheStorageTest(`[${environment}] none => isolate-and-require-corp + CORP`,
dip_none,
dip_require_corp,
corp_cross_origin,
"include",
"retrieved");

View file

@ -0,0 +1,84 @@
// META: timeout=long
// META: variant=?document
// META: variant=?dedicated_worker
// META: variant=?shared_worker
// META: variant=?service_worker
// META: script=/common/get-host-info.sub.js
// META: script=/common/utils.js
// META: script=/common/dispatcher/dispatcher.js
// META: script=/service-workers/service-worker/resources/test-helpers.sub.js
// META: script=./resources/common.js
// Fetch a resource and store it into CacheStorage from |storer| context. Then
// check if it can be retrieved via CacheStorage.match from |retriever| context.
const cacheStorageTest = (
description,
dip_storer,
dip_retriever,
resource_headers,
request_credential_mode,
expectation
) => {
promise_test(async test => {
const cross_origin = get_host_info().HTTPS_REMOTE_ORIGIN;
const resource_url = cross_origin + "/common/square.png?pipe=" + resource_headers;
// Create the storer and retriever contexts.
const storage_token = await getTokenFromEnvironment(test, environment, dip_storer);
const storage_context = new RemoteContext(storage_token);
const retriever_token = await getTokenFromEnvironment(test, environment, dip_retriever);
const retriever_context = new RemoteContext(retriever_token);
// Fetch a request from the storer. Store the opaque response into
// CacheStorage.
const stored = await storage_context.execute_script(
async (url, credential_mode) => {
const cache = await caches.open('v1');
const fetch_request = new Request(url, {
mode: 'no-cors',
credentials: credential_mode
});
const fetch_response = await fetch(fetch_request);
await cache.put(fetch_request, fetch_response);
return true;
}, [resource_url, request_credential_mode]);
assert_equals(stored, true);
// Retrieved it from |retriever|.
const was_retrieved = await retriever_context.execute_script(
async (url) => {
const cache = await caches.open('v1');
try {
const response = await cache.match(url);
return "retrieved";
} catch (error) {
return "error";
}
}, [resource_url]);
assert_equals(was_retrieved, expectation);
}, description);
};
// Execute the same set of tests for every type of execution contexts:
// Documents, DedicatedWorkers, SharedWorkers, and ServiceWorkers. The results
// should be independent of the context.
const environment = location.search.substr(1);
cacheStorageTest(`[${environment}] isolate-and-require-corp => none`,
dip_require_corp,
dip_none,
corp_cross_origin,
"include",
"retrieved");
cacheStorageTest(`[${environment}] isolate-and-require-corp => isolate-and-credentialless`,
dip_require_corp,
dip_credentialless,
corp_cross_origin,
"include",
"retrieved");
cacheStorageTest(`[${environment}] isolate-and-require-corp => isolate-and-require-corp`,
dip_require_corp,
dip_require_corp,
corp_cross_origin,
"include",
"retrieved");

View file

@ -1,150 +0,0 @@
// META: timeout=long
// META: variant=?document
// META: variant=?dedicated_worker
// META: variant=?shared_worker
// META: variant=?service_worker
// META: script=/common/get-host-info.sub.js
// META: script=/common/utils.js
// META: script=/common/dispatcher/dispatcher.js
// META: script=./resources/common.js
// Fetch a resource and store it into CacheStorage from |storer| context. Then
// check if it can be retrieved via CacheStorage.match from |retriever| context.
const cacheStorageTest = (
description,
storer,
retriever,
resource_headers,
request_credential_mode,
expectation
) => {
promise_test_parallel(async test => {
const cross_origin = get_host_info().HTTPS_REMOTE_ORIGIN;
const url = cross_origin + "/common/square.png?pipe=" + resource_headers +
`&${token()}`;
const this_token = token();
// Fetch a request from |stored|. Store the opaque response into
// CacheStorage.
send(storer, `
const cache = await caches.open("v1");
const fetch_request = new Request("${url}", {
mode: 'no-cors',
credentials: '${request_credential_mode}'
});
const fetch_response = await fetch(fetch_request);
await cache.put(fetch_request, fetch_response);
send("${this_token}", "stored");
`);
assert_equals(await receive(this_token), "stored");
// Retrieved it from |retriever|.
send(retriever, `
const cache = await caches.open("v1");
try {
const response = await cache.match("${url}");
send("${this_token}", "retrieved");
} catch (error) {
send("${this_token}", "error");
}
`);
assert_equals(await receive(this_token), expectation);
}, description);
};
// Execute the same set of tests for every type of execution contexts:
// Documents, DedicatedWorkers, SharedWorkers, and ServiceWorkers. The results
// should be independent of the context.
const environment = location.search.substr(1);
const constructor = environments[environment];
const context_none = constructor(coep_none)[0];
const context_credentialless = constructor(dip_credentialless)[0];
const context_require_corp = constructor(dip_require_corp)[0];
cacheStorageTest(`[${environment}] none => none`,
context_none,
context_none,
"",
"include",
"retrieved");
cacheStorageTest(`[${environment}] none => isolate-and-credentialless`,
context_none,
context_credentialless,
"",
"include",
"error");
cacheStorageTest(`[${environment}] none => isolate-and-credentialless (omit)`,
context_none,
context_credentialless,
"",
"omit",
"retrieved");
cacheStorageTest(`[${environment}] none => isolate-and-credentialless + CORP`,
context_none,
context_credentialless,
corp_cross_origin,
"include",
"retrieved");
cacheStorageTest(`[${environment}] none => isolate-and-require-corp`,
context_none,
context_require_corp,
"",
"include",
"error");
cacheStorageTest(`[${environment}] none => isolate-and-require-corp (omit)`,
context_none,
context_require_corp,
"",
"include",
"error");
cacheStorageTest(`[${environment}] none => isolate-and-require-corp + CORP`,
context_none,
context_require_corp,
corp_cross_origin,
"include",
"retrieved");
cacheStorageTest(`[${environment}] isolate-and-credentialless => none`,
context_credentialless,
context_none,
"",
"include",
"retrieved");
cacheStorageTest(`[${environment}] isolate-and-credentialless => isolate-and-credentialless`,
context_credentialless,
context_credentialless,
"",
"include",
"retrieved");
cacheStorageTest(`[${environment}] isolate-and-credentialless => isolate-and-require-corp`,
context_credentialless,
context_require_corp,
"",
"include",
"error");
cacheStorageTest(`[${environment}] isolate-and-credentialless => isolate-and-require-corp + CORP`,
context_credentialless,
context_require_corp,
corp_cross_origin,
"include",
"retrieved");
cacheStorageTest(`[${environment}] isolate-and-require-corp => none`,
context_require_corp,
context_none,
corp_cross_origin,
"include",
"retrieved");
cacheStorageTest(`[${environment}] isolate-and-require-corp => isolate-and-credentialless`,
context_require_corp,
context_credentialless,
corp_cross_origin,
"include",
"retrieved");
cacheStorageTest(`[${environment}] isolate-and-require-corp => isolate-and-require-corp`,
context_require_corp,
context_require_corp,
corp_cross_origin,
"include",
"retrieved");

Some files were not shown because too many files have changed in this diff Show more