Update web-platform-tests to revision 3d117ae1266e6bd039a3a1ab92b27e82c3ccc92d

This commit is contained in:
WPT Sync Bot 2018-09-23 21:29:48 -04:00
parent 647796ede6
commit 20a08918d9
132 changed files with 3012 additions and 689 deletions

File diff suppressed because it is too large Load diff

View file

@ -71,3 +71,6 @@
[bottom intermediate] [bottom intermediate]
expected: FAIL expected: FAIL
[outline-width end]
expected: FAIL

View file

@ -0,0 +1,10 @@
[scrollIntoView-svg-shape.html]
[scrollIntoView on an SVG shape element, rotated]
expected: FAIL
[scrollIntoView on an SVG shape element, geometry]
expected: FAIL
[scrollIntoView on an SVG shape element, translated]
expected: FAIL

View file

@ -1,4 +1,5 @@
[fetch-in-iframe.html] [fetch-in-iframe.html]
expected: CRASH
[Untitled] [Untitled]
expected: FAIL expected: FAIL

View file

@ -1,4 +0,0 @@
[traverse_the_history_1.html]
[Multiple history traversals from the same task]
expected: FAIL

View file

@ -1,4 +1,4 @@
[traverse_the_history_3.html] [traverse_the_history_5.html]
[Multiple history traversals, last would be aborted] [Multiple history traversals, last would be aborted]
expected: FAIL expected: FAIL

View file

@ -6004,12 +6004,6 @@
[Window interface: operation blur()] [Window interface: operation blur()]
expected: FAIL expected: FAIL
[Window interface: attribute opener]
expected: FAIL
[Window interface: operation open(USVString, DOMString, DOMString)]
expected: FAIL
[Window interface: attribute applicationCache] [Window interface: attribute applicationCache]
expected: FAIL expected: FAIL
@ -6079,18 +6073,9 @@
[Window interface: window must inherit property "frames" with the proper type] [Window interface: window must inherit property "frames" with the proper type]
expected: FAIL expected: FAIL
[Window interface: window must inherit property "opener" with the proper type]
expected: FAIL
[Window interface: window must inherit property "parent" with the proper type] [Window interface: window must inherit property "parent" with the proper type]
expected: FAIL expected: FAIL
[Window interface: window must inherit property "open(USVString, DOMString, DOMString)" with the proper type]
expected: FAIL
[Window interface: calling open(USVString, DOMString, DOMString) on window with too few arguments must throw TypeError]
expected: FAIL
[Window interface: window must inherit property "applicationCache" with the proper type] [Window interface: window must inherit property "applicationCache" with the proper type]
expected: FAIL expected: FAIL
@ -6139,15 +6124,6 @@
[html interfaces] [html interfaces]
expected: FAIL expected: FAIL
[Partial interface Document[2\]: original interface defined]
expected: FAIL
[Partial interface Document: original interface defined]
expected: FAIL
[idl_test setup]
expected: FAIL
[interfaces.https.html?include=HTML.*] [interfaces.https.html?include=HTML.*]
[HTML IDL tests] [HTML IDL tests]
@ -6531,9 +6507,6 @@
[HTMLModElement interface: document.createElement("del") must inherit property "dateTime" with the proper type] [HTMLModElement interface: document.createElement("del") must inherit property "dateTime" with the proper type]
expected: FAIL expected: FAIL
[HTMLImageElement interface: attribute srcset]
expected: FAIL
[HTMLImageElement interface: attribute sizes] [HTMLImageElement interface: attribute sizes]
expected: FAIL expected: FAIL
@ -6546,9 +6519,6 @@
[HTMLImageElement interface: attribute lowsrc] [HTMLImageElement interface: attribute lowsrc]
expected: FAIL expected: FAIL
[HTMLImageElement interface: document.createElement("img") must inherit property "srcset" with the proper type]
expected: FAIL
[HTMLImageElement interface: document.createElement("img") must inherit property "sizes" with the proper type] [HTMLImageElement interface: document.createElement("img") must inherit property "sizes" with the proper type]
expected: FAIL expected: FAIL
@ -6561,9 +6531,6 @@
[HTMLImageElement interface: document.createElement("img") must inherit property "lowsrc" with the proper type] [HTMLImageElement interface: document.createElement("img") must inherit property "lowsrc" with the proper type]
expected: FAIL expected: FAIL
[HTMLImageElement interface: new Image() must inherit property "srcset" with the proper type]
expected: FAIL
[HTMLImageElement interface: new Image() must inherit property "sizes" with the proper type] [HTMLImageElement interface: new Image() must inherit property "sizes" with the proper type]
expected: FAIL expected: FAIL
@ -9774,15 +9741,6 @@
[html interfaces] [html interfaces]
expected: FAIL expected: FAIL
[Partial interface Document[2\]: original interface defined]
expected: FAIL
[Partial interface Document: original interface defined]
expected: FAIL
[idl_test setup]
expected: FAIL
[interfaces.https.html?exclude=(Document|Window|HTML.*)] [interfaces.https.html?exclude=(Document|Window|HTML.*)]
[HTML IDL tests] [HTML IDL tests]
@ -11417,12 +11375,216 @@
[html interfaces] [html interfaces]
expected: FAIL expected: FAIL
[Partial interface Document[2\]: original interface defined] [TextMetrics interface: operation getBaselines()]
expected: FAIL expected: FAIL
[Partial interface Document: original interface defined] [SVGElement interface: attribute onmouseout]
expected: FAIL expected: FAIL
[idl_test setup] [SVGElement interface: attribute ondrop]
expected: FAIL
[SVGElement interface: attribute onreset]
expected: FAIL
[SVGElement interface: attribute oncontextmenu]
expected: FAIL
[SVGElement interface: attribute ondragend]
expected: FAIL
[SVGElement interface: attribute onauxclick]
expected: FAIL
[SVGElement interface: attribute ondragleave]
expected: FAIL
[SVGElement interface: attribute onblur]
expected: FAIL
[SVGElement interface: attribute onmousemove]
expected: FAIL
[SVGElement interface: attribute onended]
expected: FAIL
[SVGElement interface: operation blur()]
expected: FAIL
[SVGElement interface: attribute onchange]
expected: FAIL
[SVGElement interface: attribute tabIndex]
expected: FAIL
[SVGElement interface: attribute onclose]
expected: FAIL
[SVGElement interface: attribute oncancel]
expected: FAIL
[SVGElement interface: attribute onabort]
expected: FAIL
[SVGElement interface: attribute oncopy]
expected: FAIL
[SVGElement interface: attribute oncanplaythrough]
expected: FAIL
[SVGElement interface: attribute onplaying]
expected: FAIL
[SVGElement interface: attribute onclick]
expected: FAIL
[SVGElement interface: attribute onloadstart]
expected: FAIL
[SVGElement interface: attribute onsecuritypolicyviolation]
expected: FAIL
[SVGElement interface: attribute ontoggle]
expected: FAIL
[SVGElement interface: attribute onload]
expected: FAIL
[SVGElement interface: attribute onprogress]
expected: FAIL
[SVGElement interface: attribute onplay]
expected: FAIL
[SVGElement interface: attribute onsuspend]
expected: FAIL
[SVGElement interface: attribute onwheel]
expected: FAIL
[SVGElement interface: attribute onmouseup]
expected: FAIL
[SVGElement interface: attribute oncanplay]
expected: FAIL
[SVGElement interface: attribute onmouseleave]
expected: FAIL
[SVGElement interface: attribute onwaiting]
expected: FAIL
[SVGElement interface: attribute onseeked]
expected: FAIL
[SVGElement interface: attribute onmouseenter]
expected: FAIL
[SVGElement interface: attribute onstalled]
expected: FAIL
[SVGElement interface: attribute onscroll]
expected: FAIL
[SVGElement interface: attribute onloadedmetadata]
expected: FAIL
[SVGElement interface: attribute onsubmit]
expected: FAIL
[SVGElement interface: attribute ondragenter]
expected: FAIL
[SVGElement interface: attribute oncut]
expected: FAIL
[SVGElement interface: attribute onratechange]
expected: FAIL
[SVGElement interface: attribute oninput]
expected: FAIL
[SVGElement interface: attribute onpaste]
expected: FAIL
[SVGElement interface: attribute onselect]
expected: FAIL
[SVGElement interface: attribute ondragexit]
expected: FAIL
[SVGElement interface: attribute onkeydown]
expected: FAIL
[SVGElement interface: attribute ondurationchange]
expected: FAIL
[SVGElement interface: attribute ondragstart]
expected: FAIL
[SVGElement interface: attribute onloadend]
expected: FAIL
[SVGElement interface: operation focus(FocusOptions)]
expected: FAIL
[SVGElement interface: attribute onfocus]
expected: FAIL
[SVGElement interface: attribute onresize]
expected: FAIL
[SVGElement interface: attribute onerror]
expected: FAIL
[SVGElement interface: attribute dataset]
expected: FAIL
[SVGElement interface: attribute onpause]
expected: FAIL
[SVGElement interface: attribute ontimeupdate]
expected: FAIL
[SVGElement interface: attribute onemptied]
expected: FAIL
[SVGElement interface: attribute onvolumechange]
expected: FAIL
[SVGElement interface: attribute oninvalid]
expected: FAIL
[SVGElement interface: attribute oncuechange]
expected: FAIL
[SVGElement interface: attribute onseeking]
expected: FAIL
[SVGElement interface: attribute onmouseover]
expected: FAIL
[SVGElement interface: attribute onloadeddata]
expected: FAIL
[SVGElement interface: attribute onkeypress]
expected: FAIL
[SVGElement interface: attribute onmousedown]
expected: FAIL
[SVGElement interface: attribute ondragover]
expected: FAIL
[SVGElement interface: attribute ondblclick]
expected: FAIL
[SVGElement interface: attribute nonce]
expected: FAIL
[SVGElement interface: attribute onkeyup]
expected: FAIL
[SVGElement interface: attribute ondrag]
expected: FAIL expected: FAIL

View file

@ -0,0 +1,7 @@
[toggleEvent.html]
[Calling open twice on 'details' fires only one toggle event]
expected: FAIL
[Setting open=true to opened 'details' element should not fire a toggle event at the 'details' element]
expected: FAIL

View file

@ -0,0 +1,283 @@
[no-quirks.html]
[top: -\\31 .5]
expected: FAIL
[bottom: -1A]
expected: FAIL
[bottom: -1a]
expected: FAIL
[top: @1]
expected: FAIL
[top: "1a"]
expected: FAIL
[top: @a]
expected: FAIL
[bottom: "1"]
expected: FAIL
[bottom: -/**/1]
expected: FAIL
[top: +/**/1]
expected: FAIL
[bottom: @1a]
expected: FAIL
[top: 1\\31 ]
expected: FAIL
[top: url('1')]
expected: FAIL
[bottom: -\\31 ]
expected: FAIL
[top: calc(1)]
expected: FAIL
[top: \\31 ]
expected: FAIL
[bottom: +1\\31 ]
expected: FAIL
[bottom: 1\\31 .5]
expected: FAIL
[bottom: #0001]
expected: FAIL
[top: calc(2 * 2px)]
expected: FAIL
[bottom: 1a]
expected: FAIL
[bottom: A]
expected: FAIL
[bottom: #01]
expected: FAIL
[top: +\\31 .5]
expected: FAIL
[bottom: #1]
expected: FAIL
[top: -/**/1]
expected: FAIL
[bottom: +\\31 .5]
expected: FAIL
[bottom: \\31 ]
expected: FAIL
[bottom: calc(1)]
expected: FAIL
[top: #001]
expected: FAIL
[top: +\\31 ]
expected: FAIL
[bottom: +\\31 ]
expected: FAIL
[top: +1.5]
expected: FAIL
[top: +1\\31 ]
expected: FAIL
[bottom: @a]
expected: FAIL
[bottom: @1]
expected: FAIL
[top: #1]
expected: FAIL
[top: 1a]
expected: FAIL
[bottom: +1a]
expected: FAIL
[bottom: +1A]
expected: FAIL
[bottom: "a"]
expected: FAIL
[top: #00001]
expected: FAIL
[bottom: -1\\31 .5]
expected: FAIL
[top: "1"]
expected: FAIL
[bottom: 1.5]
expected: FAIL
[bottom: -\\31 .5]
expected: FAIL
[bottom: url('1')]
expected: FAIL
[bottom: -1.5]
expected: FAIL
[top: \\31 .5]
expected: FAIL
[bottom: "1a"]
expected: FAIL
[bottom: calc(2 * 2px)]
expected: FAIL
[bottom: +1\\31 .5]
expected: FAIL
[bottom: 1\\31 ]
expected: FAIL
[bottom: +/**/1]
expected: FAIL
[bottom: #00001]
expected: FAIL
[top: url(1)]
expected: FAIL
[bottom: #001]
expected: FAIL
[top: +1\\31 .5]
expected: FAIL
[top: -1a]
expected: FAIL
[top: -1A]
expected: FAIL
[bottom: url(1)]
expected: FAIL
[top: a]
expected: FAIL
[top: A]
expected: FAIL
[top: #000001]
expected: FAIL
[top: 1]
expected: FAIL
[top: 1\\31 .5]
expected: FAIL
[bottom: a]
expected: FAIL
[bottom: 1]
expected: FAIL
[bottom: +1]
expected: FAIL
[bottom: #000001]
expected: FAIL
[bottom: +a]
expected: FAIL
[bottom: +A]
expected: FAIL
[top: 1.5]
expected: FAIL
[top: +A]
expected: FAIL
[top: +a]
expected: FAIL
[top: +1]
expected: FAIL
[top: -1.5]
expected: FAIL
[top: -1\\31 .5]
expected: FAIL
[top: +1a]
expected: FAIL
[top: +1A]
expected: FAIL
[top: @1a]
expected: FAIL
[bottom: \\31 .5]
expected: FAIL
[top: "a"]
expected: FAIL
[top: #01]
expected: FAIL
[bottom: +1.5]
expected: FAIL
[bottom: -A]
expected: FAIL
[bottom: -a]
expected: FAIL
[bottom: -1\\31 ]
expected: FAIL
[top: #0001]
expected: FAIL
[bottom: -1]
expected: FAIL
[top: -\\31 ]
expected: FAIL
[top: -A]
expected: FAIL
[top: -a]
expected: FAIL
[top: -1]
expected: FAIL
[top: -1\\31 ]
expected: FAIL

View file

@ -0,0 +1,283 @@
[quirks.html]
[top: -\\31 .5]
expected: FAIL
[bottom: -1A]
expected: FAIL
[bottom: -1a]
expected: FAIL
[top: @1]
expected: FAIL
[top: "1a"]
expected: FAIL
[top: @a]
expected: FAIL
[bottom: "1"]
expected: FAIL
[bottom: -/**/1]
expected: FAIL
[top: +/**/1]
expected: FAIL
[bottom: @1a]
expected: FAIL
[top: 1\\31 ]
expected: FAIL
[top: url('1')]
expected: FAIL
[bottom: -\\31 ]
expected: FAIL
[top: calc(1)]
expected: FAIL
[top: \\31 ]
expected: FAIL
[bottom: +1\\31 ]
expected: FAIL
[bottom: 1\\31 .5]
expected: FAIL
[bottom: #0001]
expected: FAIL
[top: calc(2 * 2px)]
expected: FAIL
[bottom: 1a]
expected: FAIL
[bottom: A]
expected: FAIL
[bottom: #01]
expected: FAIL
[top: +\\31 .5]
expected: FAIL
[bottom: #1]
expected: FAIL
[top: -/**/1]
expected: FAIL
[bottom: +\\31 .5]
expected: FAIL
[bottom: \\31 ]
expected: FAIL
[bottom: calc(1)]
expected: FAIL
[top: #001]
expected: FAIL
[top: +\\31 ]
expected: FAIL
[bottom: +\\31 ]
expected: FAIL
[top: +1.5]
expected: FAIL
[top: +1\\31 ]
expected: FAIL
[bottom: @a]
expected: FAIL
[bottom: @1]
expected: FAIL
[top: #1]
expected: FAIL
[top: 1a]
expected: FAIL
[bottom: +1a]
expected: FAIL
[bottom: +1A]
expected: FAIL
[bottom: "a"]
expected: FAIL
[top: #00001]
expected: FAIL
[bottom: -1\\31 .5]
expected: FAIL
[top: "1"]
expected: FAIL
[bottom: 1.5]
expected: FAIL
[bottom: -\\31 .5]
expected: FAIL
[bottom: url('1')]
expected: FAIL
[bottom: -1.5]
expected: FAIL
[top: \\31 .5]
expected: FAIL
[bottom: "1a"]
expected: FAIL
[bottom: calc(2 * 2px)]
expected: FAIL
[bottom: +1\\31 .5]
expected: FAIL
[bottom: 1\\31 ]
expected: FAIL
[bottom: +/**/1]
expected: FAIL
[bottom: #00001]
expected: FAIL
[top: url(1)]
expected: FAIL
[bottom: #001]
expected: FAIL
[top: +1\\31 .5]
expected: FAIL
[top: -1a]
expected: FAIL
[top: -1A]
expected: FAIL
[bottom: url(1)]
expected: FAIL
[top: a]
expected: FAIL
[top: A]
expected: FAIL
[top: #000001]
expected: FAIL
[top: 1]
expected: FAIL
[top: 1\\31 .5]
expected: FAIL
[bottom: a]
expected: FAIL
[bottom: 1]
expected: FAIL
[bottom: +1]
expected: FAIL
[bottom: #000001]
expected: FAIL
[bottom: +a]
expected: FAIL
[bottom: +A]
expected: FAIL
[top: 1.5]
expected: FAIL
[top: +A]
expected: FAIL
[top: +a]
expected: FAIL
[top: +1]
expected: FAIL
[top: -1.5]
expected: FAIL
[top: -1\\31 .5]
expected: FAIL
[top: +1a]
expected: FAIL
[top: +1A]
expected: FAIL
[top: @1a]
expected: FAIL
[bottom: \\31 .5]
expected: FAIL
[top: "a"]
expected: FAIL
[top: #01]
expected: FAIL
[bottom: +1.5]
expected: FAIL
[bottom: -A]
expected: FAIL
[bottom: -a]
expected: FAIL
[bottom: -1\\31 ]
expected: FAIL
[top: #0001]
expected: FAIL
[bottom: -1]
expected: FAIL
[top: -\\31 ]
expected: FAIL
[top: -A]
expected: FAIL
[top: -a]
expected: FAIL
[top: -1]
expected: FAIL
[top: -1\\31 ]
expected: FAIL

View file

@ -5,10 +5,10 @@
[request.formData() with input: _charset_=windows-1252&test=%C2x] [request.formData() with input: _charset_=windows-1252&test=%C2x]
expected: FAIL expected: FAIL
[response.formData() with input: a=b&c=d&] [request.formData() with input: a&b&c]
expected: FAIL expected: FAIL
[response.formData() with input: a=b&c=d] [request.formData() with input: a=b&c=d]
expected: FAIL expected: FAIL
@ -19,12 +19,9 @@
[request.formData() with input: _charset_=windows-1252&test=%C2x] [request.formData() with input: _charset_=windows-1252&test=%C2x]
expected: FAIL expected: FAIL
[request.formData() with input: a=b&c=d]
expected: FAIL
[response.formData() with input: a&b&c] [response.formData() with input: a&b&c]
expected: FAIL expected: FAIL
[response.formData() with input: a=b&c=d&] [response.formData() with input: &&&a=b&&&&c=d&]
expected: FAIL expected: FAIL

View file

@ -29,6 +29,45 @@
[Promise type] [Promise type]
expected: FAIL expected: FAIL
[Empty module with undefined imports argument: BufferSource argument]
expected: FAIL
[getter order for imports object: BufferSource argument]
expected: FAIL
[Empty module without imports argument: BufferSource argument]
expected: FAIL
[Empty module with empty imports argument: BufferSource argument]
expected: FAIL
[No imports: Module argument]
expected: FAIL
[Empty module with undefined imports argument: Module argument]
expected: FAIL
[exports and imports: BufferSource argument]
expected: FAIL
[imports: Module argument]
expected: FAIL
[Empty module without imports argument: Module argument]
expected: FAIL
[No imports: BufferSource argument]
expected: FAIL
[Empty module with empty imports argument: Module argument]
expected: FAIL
[imports: BufferSource argument]
expected: FAIL
[getter order for imports object: Module argument]
expected: FAIL
[instantiate.any.worker.html] [instantiate.any.worker.html]
[Invalid arguments] [Invalid arguments]
@ -61,3 +100,42 @@
[Promise type] [Promise type]
expected: FAIL expected: FAIL
[Empty module with undefined imports argument: BufferSource argument]
expected: FAIL
[getter order for imports object: BufferSource argument]
expected: FAIL
[Empty module without imports argument: BufferSource argument]
expected: FAIL
[Empty module with empty imports argument: BufferSource argument]
expected: FAIL
[No imports: Module argument]
expected: FAIL
[Empty module with undefined imports argument: Module argument]
expected: FAIL
[exports and imports: BufferSource argument]
expected: FAIL
[imports: Module argument]
expected: FAIL
[Empty module without imports argument: Module argument]
expected: FAIL
[No imports: BufferSource argument]
expected: FAIL
[Empty module with empty imports argument: Module argument]
expected: FAIL
[imports: BufferSource argument]
expected: FAIL
[getter order for imports object: Module argument]
expected: FAIL

View file

@ -2,8 +2,14 @@
[exports] [exports]
expected: FAIL expected: FAIL
[No imports]
expected: FAIL
[constructor.any.worker.html] [constructor.any.worker.html]
[exports] [exports]
expected: FAIL expected: FAIL
[No imports]
expected: FAIL

View file

@ -56,6 +56,24 @@
[Getting out-of-range argument: -Infinity] [Getting out-of-range argument: -Infinity]
expected: FAIL expected: FAIL
[Setting non-wasm arrow function]
expected: FAIL
[Basic]
expected: FAIL
[Setting non-wasm function]
expected: FAIL
[Setting out-of-bounds]
expected: FAIL
[Growing]
expected: FAIL
[Setting non-function]
expected: FAIL
[get-set.any.html] [get-set.any.html]
[Setting out-of-range argument: NaN] [Setting out-of-range argument: NaN]
@ -115,3 +133,21 @@
[Getting out-of-range argument: -Infinity] [Getting out-of-range argument: -Infinity]
expected: FAIL expected: FAIL
[Setting non-wasm arrow function]
expected: FAIL
[Basic]
expected: FAIL
[Setting non-wasm function]
expected: FAIL
[Setting out-of-bounds]
expected: FAIL
[Growing]
expected: FAIL
[Setting non-function]
expected: FAIL

View file

@ -29,6 +29,15 @@
[Out-of-range argument: "0x100000000"] [Out-of-range argument: "0x100000000"]
expected: FAIL expected: FAIL
[Reached maximum]
expected: FAIL
[Exceeded maximum]
expected: FAIL
[Basic]
expected: FAIL
[grow.any.worker.html] [grow.any.worker.html]
[Out-of-range argument: 68719476736] [Out-of-range argument: 68719476736]
@ -61,3 +70,12 @@
[Out-of-range argument: "0x100000000"] [Out-of-range argument: "0x100000000"]
expected: FAIL expected: FAIL
[Reached maximum]
expected: FAIL
[Exceeded maximum]
expected: FAIL
[Basic]
expected: FAIL

View file

@ -1664,3 +1664,9 @@
[idl_test setup] [idl_test setup]
expected: FAIL expected: FAIL
[OfflineAudioContext interface: operation resume()]
expected: FAIL
[AudioContext interface: operation resume()]
expected: FAIL

View file

@ -1,4 +1,5 @@
[realtimeanalyser-fft-scaling.html] [realtimeanalyser-fft-scaling.html]
expected: TIMEOUT
[X 2048-point FFT peak position is not equal to 64. Got 0.] [X 2048-point FFT peak position is not equal to 64. Got 0.]
expected: FAIL expected: FAIL

View file

@ -9,8 +9,8 @@ tasks:
$flatten: $flatten:
$match: { $match: {
event.ref == "refs/heads/master": [{name: firefox, channel: nightly}, {name: chrome, channel: dev}], event.ref == "refs/heads/master": [{name: firefox, channel: nightly}, {name: chrome, channel: dev}],
event.ref == "refs/heads/epochs/daily": [{name: firefox, channel: beta}, {name: chrome, channel: beta}], event.ref == "refs/heads/epochs/daily": [{name: firefox, channel: stable}, {name: chrome, channel: stable}],
event.ref == "refs/heads/epochs/weekly": [{name: firefox, channel: stable}, {name: chrome, channel: stable}] event.ref == "refs/heads/epochs/weekly": [{name: firefox, channel: beta}, {name: chrome, channel: beta}]
} }
each(browser): each(browser):
$map: $map:

View file

@ -1,8 +1,8 @@
<!DOCTYPE html> <!DOCTYPE html>
<html class=reftest-wait> <html class=reftest-wait>
<link rel="help" href="https://drafts.css-houdini.org/css-layout-api/#dom-layoutconstraintsoptions-availableinlinesize"> <link rel="help" href="https://drafts.css-houdini.org/css-layout-api/#dom-layoutconstraintsoptions-availableblocksize">
<link rel="match" href="green-square-ref.html"> <link rel="match" href="../green-square-ref.html">
<meta name="assert" content="This test checks that setting the available inline size of children works as expected." /> <meta name="assert" content="This test checks that setting the available block-size of children works as expected." />
<style> <style>
.test { .test {
@ -61,5 +61,5 @@
</div> </div>
<script> <script>
importWorkletAndTerminateTestAfterAsyncPaint(CSS.layoutWorklet, {url: 'support/layout-child-sizes-worklet.js'}); importWorkletAndTerminateTestAfterAsyncPaint(CSS.layoutWorklet, {url: '../support/layout-child-sizes-worklet.js'});
</script> </script>

View file

@ -0,0 +1,49 @@
<!DOCTYPE html>
<html class=reftest-wait>
<link rel="help" href="https://drafts.css-houdini.org/css-layout-api/#dom-layoutconstraintsoptions-availableblocksize">
<link rel="match" href="../green-square-ref.html">
<meta name="assert" content="This test checks that setting an invalid available block-size works as expected." />
<style>
.test {
writing-mode: horizontal-tb;
background: red;
width: 100px;
}
.child {
writing-mode: vertical-rl;
visibility: hidden;
line-height: 0;
--available-block-size: -20;
}
.inline {
display: inline-block;
width: 8px;
}
.inline-size-10 { height: 10px; }
@supports (display: layout(test)) {
.test {
background: green;
display: layout(test);
}
}
</style>
<script src="/common/reftest-wait.js"></script>
<script src="/common/worklet-reftest.js"></script>
<div class="test">
<!-- The invalid available block-size should be clamped to zero. -->
<div class="child" style="--block-size-expected: 10; --inline-size-expected: 16;">
<span class="inline inline-size-10"></span>
<span class="inline inline-size-10"></span>
</div>
</div>
<script>
importWorkletAndTerminateTestAfterAsyncPaint(CSS.layoutWorklet, {url: '../support/layout-child-sizes-worklet.js'});
</script>

View file

@ -1,8 +1,8 @@
<!DOCTYPE html> <!DOCTYPE html>
<html class=reftest-wait> <html class=reftest-wait>
<link rel="help" href="https://drafts.css-houdini.org/css-layout-api/#dom-layoutconstraintsoptions-availableinlinesize"> <link rel="help" href="https://drafts.css-houdini.org/css-layout-api/#dom-layoutconstraintsoptions-availableblocksize">
<link rel="match" href="green-square-ref.html"> <link rel="match" href="../green-square-ref.html">
<meta name="assert" content="This test checks that setting the available inline size of children works as expected." /> <meta name="assert" content="This test checks that setting the available block-size of children works as expected." />
<style> <style>
.test { .test {
@ -61,5 +61,5 @@
</div> </div>
<script> <script>
importWorkletAndTerminateTestAfterAsyncPaint(CSS.layoutWorklet, {url: 'support/layout-child-sizes-worklet.js'}); importWorkletAndTerminateTestAfterAsyncPaint(CSS.layoutWorklet, {url: '../support/layout-child-sizes-worklet.js'});
</script> </script>

View file

@ -1,8 +1,8 @@
<!DOCTYPE html> <!DOCTYPE html>
<html class=reftest-wait> <html class=reftest-wait>
<link rel="help" href="https://drafts.css-houdini.org/css-layout-api/#dom-layoutconstraintsoptions-availableinlinesize"> <link rel="help" href="https://drafts.css-houdini.org/css-layout-api/#dom-layoutconstraintsoptions-availableinlinesize">
<link rel="match" href="green-square-ref.html"> <link rel="match" href="../green-square-ref.html">
<meta name="assert" content="This test checks that setting the available inline size of children works as expected." /> <meta name="assert" content="This test checks that setting the available inline-size of children works as expected." />
<style> <style>
.test { .test {
@ -61,5 +61,5 @@
</div> </div>
<script> <script>
importWorkletAndTerminateTestAfterAsyncPaint(CSS.layoutWorklet, {url: 'support/layout-child-sizes-worklet.js'}); importWorkletAndTerminateTestAfterAsyncPaint(CSS.layoutWorklet, {url: '../support/layout-child-sizes-worklet.js'});
</script> </script>

View file

@ -0,0 +1,49 @@
<!DOCTYPE html>
<html class=reftest-wait>
<link rel="help" href="https://drafts.css-houdini.org/css-layout-api/#dom-layoutconstraintsoptions-availableinlinesize">
<link rel="match" href="../green-square-ref.html">
<meta name="assert" content="This test checks that setting an invalid available inline-size works as expected." />
<style>
.test {
writing-mode: horizontal-tb;
background: red;
width: 100px;
}
.child {
writing-mode: horizontal-tb;
visibility: hidden;
line-height: 0;
--available-inline-size: -20;
}
.inline {
display: inline-block;
height: 8px;
}
.inline-size-10 { width: 10px; }
@supports (display: layout(test)) {
.test {
background: green;
display: layout(test);
}
}
</style>
<script src="/common/reftest-wait.js"></script>
<script src="/common/worklet-reftest.js"></script>
<div class="test">
<!-- The invalid available inline-size should be clamped to zero. -->
<div class="child" style="--inline-size-expected: 10; --block-size-expected: 16;">
<span class="inline inline-size-10"></span>
<span class="inline inline-size-10"></span>
</div>
</div>
<script>
importWorkletAndTerminateTestAfterAsyncPaint(CSS.layoutWorklet, {url: '../support/layout-child-sizes-worklet.js'});
</script>

View file

@ -1,8 +1,8 @@
<!DOCTYPE html> <!DOCTYPE html>
<html class=reftest-wait> <html class=reftest-wait>
<link rel="help" href="https://drafts.css-houdini.org/css-layout-api/#dom-layoutconstraintsoptions-availableinlinesize"> <link rel="help" href="https://drafts.css-houdini.org/css-layout-api/#dom-layoutconstraintsoptions-availableinlinesize">
<link rel="match" href="green-square-ref.html"> <link rel="match" href="../green-square-ref.html">
<meta name="assert" content="This test checks that setting the available inline size of children works as expected." /> <meta name="assert" content="This test checks that setting the available inline-size of children works as expected." />
<style> <style>
.test { .test {
@ -61,5 +61,5 @@
</div> </div>
<script> <script>
importWorkletAndTerminateTestAfterAsyncPaint(CSS.layoutWorklet, {url: 'support/layout-child-sizes-worklet.js'}); importWorkletAndTerminateTestAfterAsyncPaint(CSS.layoutWorklet, {url: '../support/layout-child-sizes-worklet.js'});
</script> </script>

View file

@ -0,0 +1,59 @@
<!DOCTYPE html>
<html class=reftest-wait>
<link rel="help" href="https://drafts.css-houdini.org/css-layout-api/#dom-layoutconstraintsoptions-availableinlinesize">
<link rel="help" href="https://drafts.css-houdini.org/css-layout-api/#dom-layoutconstraintsoptions-availableblocksize">
<link rel="match" href="../green-square-ref.html">
<meta name="assert" content="This test checks that resolving percentages against the available size works as expected." />
<style>
.test {
writing-mode: horizontal-tb;
background: red;
width: 100px;
}
.child {
writing-mode: horizontal-tb;
visibility: hidden;
--available-inline-size: 50;
--available-block-size: 20;
--inline-size-expected: 10px;
--block-size-expected: 10px;
}
@supports (display: layout(test)) {
.test {
background: green;
display: layout(test);
}
}
</style>
<script src="/common/reftest-wait.js"></script>
<script src="/common/worklet-reftest.js"></script>
<div class="test">
<!-- A fixed width/height shouldn't be affected by the available size. -->
<div class="child" style="width: 10px; height: 10px;"></div>
<!-- A percentage width/height should resolve itself against the available size. -->
<div class="child" style="width: 20%; height: 50%;"></div>
<!-- A percentage max-width/max-height should resolve itself against the available size. -->
<div class="child" style="width: 15px; max-width: 20%; height: 15px; max-height: 50%;"></div>
<!-- A percentage min-width/min-height should resolve itself against the available size. -->
<div class="child" style="width: 5px; min-width: 20%; height: 5px; min-height: 50%;"></div>
<!-- A replaced percentage width/height should resolve itself against the available size. -->
<img class="child" style="width: 20%; height: 50%;" />
<!-- A replaced percentage max-width/max-height should resolve itself against the available size. -->
<img class="child" style="width: 15px; max-width: 20%; height: 15px; max-height: 50%;" />
<!-- A replaced percentage min-width/min-height should resolve itself against the available size. -->
<img class="child" style="width: 5px; min-width: 20%; height: 5px; min-height: 50%;" />
<script>
importWorkletAndTerminateTestAfterAsyncPaint(CSS.layoutWorklet, {url: '../support/layout-child-sizes-worklet.js'});
</script>

View file

@ -0,0 +1,59 @@
<!DOCTYPE html>
<html class=reftest-wait>
<link rel="help" href="https://drafts.css-houdini.org/css-layout-api/#dom-layoutconstraintsoptions-availableinlinesize">
<link rel="help" href="https://drafts.css-houdini.org/css-layout-api/#dom-layoutconstraintsoptions-availableblocksize">
<link rel="match" href="../green-square-ref.html">
<meta name="assert" content="This test checks that resolving percentages against the available size works as expected." />
<style>
.test {
writing-mode: horizontal-tb;
background: red;
width: 100px;
}
.child {
writing-mode: vertical-rl;
visibility: hidden;
--available-inline-size: 50;
--available-block-size: 20;
--inline-size-expected: 10px;
--block-size-expected: 10px;
}
@supports (display: layout(test)) {
.test {
background: green;
display: layout(test);
}
}
</style>
<script src="/common/reftest-wait.js"></script>
<script src="/common/worklet-reftest.js"></script>
<div class="test">
<!-- A fixed width/height shouldn't be affected by the available size. -->
<div class="child" style="width: 10px; height: 10px;"></div>
<!-- A percentage width/height should resolve itself against the available size. -->
<div class="child" style="width: 20%; height: 50%;"></div>
<!-- A percentage max-width/max-height should resolve itself against the available size. -->
<div class="child" style="width: 15px; max-width: 20%; height: 15px; max-height: 50%;"></div>
<!-- A percentage min-width/min-height should resolve itself against the available size. -->
<div class="child" style="width: 5px; min-width: 20%; height: 5px; min-height: 50%;"></div>
<!-- A replaced percentage width/height should resolve itself against the available size. -->
<img class="child" style="width: 20%; height: 50%;" />
<!-- A replaced percentage max-width/max-height should resolve itself against the available size. -->
<img class="child" style="width: 15px; max-width: 20%; height: 15px; max-height: 50%;" />
<!-- A replaced percentage min-width/min-height should resolve itself against the available size. -->
<img class="child" style="width: 5px; min-width: 20%; height: 5px; min-height: 50%;" />
<script>
importWorkletAndTerminateTestAfterAsyncPaint(CSS.layoutWorklet, {url: '../support/layout-child-sizes-worklet.js'});
</script>

View file

@ -0,0 +1,49 @@
<!DOCTYPE html>
<html class=reftest-wait>
<link rel="help" href="https://drafts.css-houdini.org/css-layout-api/#dom-layoutconstraintsoptions-availableinlinesize">
<link rel="help" href="https://drafts.css-houdini.org/css-layout-api/#dom-layoutconstraintsoptions-availableblocksize">
<link rel="match" href="../green-square-ref.html">
<meta name="assert" content="This test checks that resolving percentages against an invalid available size works as expected." />
<style>
.test {
background: red;
width: 100px;
}
.child {
visibility: hidden;
width: 10px;
line-height: 0;
--available-inline-size: -20;
--available-block-size: -10;
}
.inline {
display: inline-block;
width: 10px;
height: 10px;
}
@supports (display: layout(test)) {
.test {
background: green;
display: layout(test);
}
}
</style>
<script src="/common/reftest-wait.js"></script>
<script src="/common/worklet-reftest.js"></script>
<div class="test">
<!-- The available inline-size gets clamped to zero, and the available block-size gets treated as indefinite. -->
<div class="child" style="--inline-size-expected: 0px; --block-size-expected: 10px; width: 100%; height: 100%;">
<div class="inline"></div>
</div>
<!-- For replaced elements, both axis should be resolved to 0px. -->
<img class="child" style="--inline-size-expected: 0px; --block-size-expected: 0px; width: 100%; height: 100%;" />
<script>
importWorkletAndTerminateTestAfterAsyncPaint(CSS.layoutWorklet, {url: '../support/layout-child-sizes-worklet.js'});
</script>

View file

@ -0,0 +1,59 @@
<!DOCTYPE html>
<html class=reftest-wait>
<link rel="help" href="https://drafts.css-houdini.org/css-layout-api/#dom-layoutconstraintsoptions-availableinlinesize">
<link rel="help" href="https://drafts.css-houdini.org/css-layout-api/#dom-layoutconstraintsoptions-availableblocksize">
<link rel="match" href="../green-square-ref.html">
<meta name="assert" content="This test checks that resolving percentages against the available size works as expected." />
<style>
.test {
writing-mode: vertical-rl;
background: red;
height: 100px;
}
.child {
writing-mode: horizontal-tb;
visibility: hidden;
--available-inline-size: 20;
--available-block-size: 50;
--inline-size-expected: 10px;
--block-size-expected: 10px;
}
@supports (display: layout(test)) {
.test {
background: green;
display: layout(test);
}
}
</style>
<script src="/common/reftest-wait.js"></script>
<script src="/common/worklet-reftest.js"></script>
<div class="test">
<!-- A fixed width/height shouldn't be affected by the available size. -->
<div class="child" style="width: 10px; height: 10px;"></div>
<!-- A percentage width/height should resolve itself against the available size. -->
<div class="child" style="width: 20%; height: 50%;"></div>
<!-- A percentage max-width/max-height should resolve itself against the available size. -->
<div class="child" style="width: 15px; max-width: 20%; height: 15px; max-height: 50%;"></div>
<!-- A percentage min-width/min-height should resolve itself against the available size. -->
<div class="child" style="width: 5px; min-width: 20%; height: 5px; min-height: 50%;"></div>
<!-- A replaced percentage width/height should resolve itself against the available size. -->
<img class="child" style="width: 20%; height: 50%;" />
<!-- A replaced percentage max-width/max-height should resolve itself against the available size. -->
<img class="child" style="width: 15px; max-width: 20%; height: 15px; max-height: 50%;" />
<!-- A replaced percentage min-width/min-height should resolve itself against the available size. -->
<img class="child" style="width: 5px; min-width: 20%; height: 5px; min-height: 50%;" />
<script>
importWorkletAndTerminateTestAfterAsyncPaint(CSS.layoutWorklet, {url: '../support/layout-child-sizes-worklet.js'});
</script>

View file

@ -0,0 +1,59 @@
<!DOCTYPE html>
<html class=reftest-wait>
<link rel="help" href="https://drafts.css-houdini.org/css-layout-api/#dom-layoutconstraintsoptions-availableinlinesize">
<link rel="help" href="https://drafts.css-houdini.org/css-layout-api/#dom-layoutconstraintsoptions-availableblocksize">
<link rel="match" href="../green-square-ref.html">
<meta name="assert" content="This test checks that resolving percentages against the available size works as expected." />
<style>
.test {
writing-mode: vertical-rl;
background: red;
height: 100px;
}
.child {
writing-mode: vertical-rl;
visibility: hidden;
--available-inline-size: 20;
--available-block-size: 50;
--inline-size-expected: 10px;
--block-size-expected: 10px;
}
@supports (display: layout(test)) {
.test {
background: green;
display: layout(test);
}
}
</style>
<script src="/common/reftest-wait.js"></script>
<script src="/common/worklet-reftest.js"></script>
<div class="test">
<!-- A fixed width/height shouldn't be affected by the available size. -->
<div class="child" style="width: 10px; height: 10px;"></div>
<!-- A percentage width/height should resolve itself against the available size. -->
<div class="child" style="width: 20%; height: 50%;"></div>
<!-- A percentage max-width/max-height should resolve itself against the available size. -->
<div class="child" style="width: 15px; max-width: 20%; height: 15px; max-height: 50%;"></div>
<!-- A percentage min-width/min-height should resolve itself against the available size. -->
<div class="child" style="width: 5px; min-width: 20%; height: 5px; min-height: 50%;"></div>
<!-- A replaced percentage width/height should resolve itself against the available size. -->
<img class="child" style="width: 20%; height: 50%;" />
<!-- A replaced percentage max-width/max-height should resolve itself against the available size. -->
<img class="child" style="width: 15px; max-width: 20%; height: 15px; max-height: 50%;" />
<!-- A replaced percentage min-width/min-height should resolve itself against the available size. -->
<img class="child" style="width: 5px; min-width: 20%; height: 5px; min-height: 50%;" />
<script>
importWorkletAndTerminateTestAfterAsyncPaint(CSS.layoutWorklet, {url: '../support/layout-child-sizes-worklet.js'});
</script>

View file

@ -1,7 +1,7 @@
<!DOCTYPE html> <!DOCTYPE html>
<html class=reftest-wait> <html class=reftest-wait>
<link rel="help" href="https://drafts.css-houdini.org/css-layout-api/#dom-layoutconstraintsoptions-fixedinlinesize"> <link rel="help" href="https://drafts.css-houdini.org/css-layout-api/#dom-layoutconstraintsoptions-fixedblocksize">
<link rel="match" href="green-square-ref.html"> <link rel="match" href="../green-square-ref.html">
<meta name="assert" content="This test checks that fixing the block size of children works as expected." /> <meta name="assert" content="This test checks that fixing the block size of children works as expected." />
<style> <style>
@ -56,5 +56,5 @@
</div> </div>
<script> <script>
importWorkletAndTerminateTestAfterAsyncPaint(CSS.layoutWorklet, {url: 'support/layout-child-sizes-worklet.js'}); importWorkletAndTerminateTestAfterAsyncPaint(CSS.layoutWorklet, {url: '../support/layout-child-sizes-worklet.js'});
</script> </script>

View file

@ -1,7 +1,7 @@
<!DOCTYPE html> <!DOCTYPE html>
<html class=reftest-wait> <html class=reftest-wait>
<link rel="help" href="https://drafts.css-houdini.org/css-layout-api/#dom-layoutconstraintsoptions-fixedblocksize"> <link rel="help" href="https://drafts.css-houdini.org/css-layout-api/#dom-layoutconstraintsoptions-fixedblocksize">
<link rel="match" href="green-square-ref.html"> <link rel="match" href="../green-square-ref.html">
<meta name="assert" content="This test checks that fixing the block size of children works as expected." /> <meta name="assert" content="This test checks that fixing the block size of children works as expected." />
<style> <style>
@ -55,5 +55,5 @@
</div> </div>
<script> <script>
importWorkletAndTerminateTestAfterAsyncPaint(CSS.layoutWorklet, {url: 'support/layout-child-sizes-worklet.js'}); importWorkletAndTerminateTestAfterAsyncPaint(CSS.layoutWorklet, {url: '../support/layout-child-sizes-worklet.js'});
</script> </script>

View file

@ -1,7 +1,7 @@
<!DOCTYPE html> <!DOCTYPE html>
<html class=reftest-wait> <html class=reftest-wait>
<link rel="help" href="https://drafts.css-houdini.org/css-layout-api/#dom-layoutconstraintsoptions-fixedinlinesize"> <link rel="help" href="https://drafts.css-houdini.org/css-layout-api/#dom-layoutconstraintsoptions-fixedinlinesize">
<link rel="match" href="green-square-ref.html"> <link rel="match" href="../green-square-ref.html">
<meta name="assert" content="This test checks that fixing the inline size of children works as expected." /> <meta name="assert" content="This test checks that fixing the inline size of children works as expected." />
<style> <style>
@ -56,5 +56,5 @@
</div> </div>
<script> <script>
importWorkletAndTerminateTestAfterAsyncPaint(CSS.layoutWorklet, {url: 'support/layout-child-sizes-worklet.js'}); importWorkletAndTerminateTestAfterAsyncPaint(CSS.layoutWorklet, {url: '../support/layout-child-sizes-worklet.js'});
</script> </script>

View file

@ -1,7 +1,7 @@
<!DOCTYPE html> <!DOCTYPE html>
<html class=reftest-wait> <html class=reftest-wait>
<link rel="help" href="https://drafts.css-houdini.org/css-layout-api/#dom-layoutconstraintsoptions-fixedinlinesize"> <link rel="help" href="https://drafts.css-houdini.org/css-layout-api/#dom-layoutconstraintsoptions-fixedinlinesize">
<link rel="match" href="green-square-ref.html"> <link rel="match" href="../green-square-ref.html">
<meta name="assert" content="This test checks that fixing the inline size of children works as expected." /> <meta name="assert" content="This test checks that fixing the inline size of children works as expected." />
<style> <style>
@ -55,5 +55,5 @@
</div> </div>
<script> <script>
importWorkletAndTerminateTestAfterAsyncPaint(CSS.layoutWorklet, {url: 'support/layout-child-sizes-worklet.js'}); importWorkletAndTerminateTestAfterAsyncPaint(CSS.layoutWorklet, {url: '../support/layout-child-sizes-worklet.js'});
</script> </script>

View file

@ -0,0 +1,58 @@
<!DOCTYPE html>
<html class=reftest-wait>
<link rel="help" href="https://drafts.css-houdini.org/css-layout-api/#dom-layoutconstraintsoptions-percentageblocksize">
<link rel="match" href="../green-square-ref.html">
<meta name="assert" content="This test checks that setting the percentage block-size of children works as expected." />
<style>
.test {
writing-mode: horizontal-tb;
background: red;
width: 100px;
}
.child {
writing-mode: horizontal-tb;
visibility: hidden;
width: 10px;
--percentage-block-size: 20;
--inline-size-expected: 10px;
--block-size-expected: 10px;
}
@supports (display: layout(test)) {
.test {
background: green;
display: layout(test);
}
}
</style>
<script src="/common/reftest-wait.js"></script>
<script src="/common/worklet-reftest.js"></script>
<div class="test">
<!-- A fixed height shouldn't be affected by the percentage size. -->
<div class="child" style="height: 10px;"></div>
<!-- A percentage height should resolve itself against the percentageBlockSize. -->
<div class="child" style="height: 50%;"></div>
<!-- A percentage max-height should resolve itself against the percentageBlockSize. -->
<div class="child" style="height: 15px; max-height: 50%;"></div>
<!-- A percentage min-height should resolve itself against the percentageBlockSize. -->
<div class="child" style="height: 5px; min-height: 50%;"></div>
<!-- A replaced percentage height should resolve itself against the percentageBlockSize. -->
<img class="child" style="height: 50%;" />
<!-- A replaced percentage max-height should resolve itself against the percentageBlockSize. -->
<img class="child" style="height: 15px; max-height: 50%;" />
<!-- A replaced percentage min-height should resolve itself against the percentageBlockSize. -->
<img class="child" style="height: 5px; min-height: 50%;" />
<script>
importWorkletAndTerminateTestAfterAsyncPaint(CSS.layoutWorklet, {url: '../support/layout-child-sizes-worklet.js'});
</script>

View file

@ -0,0 +1,58 @@
<!DOCTYPE html>
<html class=reftest-wait>
<link rel="help" href="https://drafts.css-houdini.org/css-layout-api/#dom-layoutconstraintsoptions-percentageinlinesize">
<link rel="match" href="../green-square-ref.html">
<meta name="assert" content="This test checks that setting the percentage inline-size of children works as expected." />
<style>
.test {
writing-mode: horizontal-tb;
background: red;
width: 100px;
}
.child {
writing-mode: vertical-rl;
visibility: hidden;
height: 10px;
--percentage-inline-size: 20;
--inline-size-expected: 10px;
--block-size-expected: 10px;
}
@supports (display: layout(test)) {
.test {
background: green;
display: layout(test);
}
}
</style>
<script src="/common/reftest-wait.js"></script>
<script src="/common/worklet-reftest.js"></script>
<div class="test">
<!-- A fixed width shouldn't be affected by the percentage size. -->
<div class="child" style="width: 10px;"></div>
<!-- A percentage width should resolve itself against the percentageInlineSize. -->
<div class="child" style="width: 50%;"></div>
<!-- A percentage max-width should resolve itself against the percentageInlineSize. -->
<div class="child" style="width: 15px; max-width: 50%;"></div>
<!-- A percentage min-width should resolve itself against the percentageInlineSize. -->
<div class="child" style="width: 5px; min-width: 50%;"></div>
<!-- A replaced percentage width should resolve itself against the percentageInlineSize. -->
<img class="child" style="width: 50%;" />
<!-- A replaced percentage max-width should resolve itself against the percentageInlineSize. -->
<img class="child" style="width: 15px; max-width: 50%;" />
<!-- A replaced percentage min-width should resolve itself against the percentageInlineSize. -->
<img class="child" style="width: 5px; min-width: 50%;" />
<script>
importWorkletAndTerminateTestAfterAsyncPaint(CSS.layoutWorklet, {url: '../support/layout-child-sizes-worklet.js'});
</script>

View file

@ -0,0 +1,47 @@
<!DOCTYPE html>
<html class=reftest-wait>
<link rel="help" href="https://drafts.css-houdini.org/css-layout-api/#dom-layoutconstraintsoptions-percentageblocksize">
<link rel="match" href="../green-square-ref.html">
<meta name="assert" content="This test checks that setting an invalid percentage block-size of children works as expected." />
<style>
.test {
background: red;
width: 100px;
}
.child {
visibility: hidden;
width: 10px;
line-height: 0;
--percentage-block-size: -10;
}
.inline {
display: inline-block;
width: 10px;
height: 10px;
}
@supports (display: layout(test)) {
.test {
background: green;
display: layout(test);
}
}
</style>
<script src="/common/reftest-wait.js"></script>
<script src="/common/worklet-reftest.js"></script>
<div class="test">
<!-- A percentage shouldn't be resolved against an invalid percentageBlockSize. -->
<div class="child" style="--inline-size-expected: 10px; --block-size-expected: 10px; height: 100%;">
<div class="inline"></div>
</div>
<!-- A percentage shouldn't be resolved against an invalid percentageBlockSize. -->
<img class="child" style="--inline-size-expected: 10px; --block-size-expected: 0px; height: 100%;" />
<script>
importWorkletAndTerminateTestAfterAsyncPaint(CSS.layoutWorklet, {url: '../support/layout-child-sizes-worklet.js'});
</script>

View file

@ -0,0 +1,55 @@
<html class=reftest-wait>
<link rel="help" href="https://drafts.css-houdini.org/css-layout-api/#dom-layoutconstraintsoptions-percentageblocksize">
<link rel="match" href="../green-square-ref.html">
<meta name="assert" content="This test checks that setting a percentage block-size works correctly in quirks mode." />
<style>
.container {
height: 200px;
}
.test {
background: red;
width: 100px;
}
.child {
visibility: hidden;
width: 10px;
line-height: 0;
}
.inline {
display: inline-block;
width: 10px;
height: 10px;
}
@supports (display: layout(test)) {
.test {
background: green;
display: layout(test);
}
}
</style>
<script src="/common/reftest-wait.js"></script>
<script src="/common/worklet-reftest.js"></script>
<div class="container">
<div class="test">
<!-- TODO explain. -->
<div class="child" style="--percentage-block-size: 50px; --inline-size-expected: 10px; --block-size-expected: 10px;">
<div style="height: 20%"></div>
</div>
<!-- TODO explain. -->
<div class="child" style="--inline-size-expected: 10px; --block-size-expected: 10px;">
<div style="height: 100%">
<div class="inline"></div>
</div>
</div>
</div>
</div>
<script>
importWorkletAndTerminateTestAfterAsyncPaint(CSS.layoutWorklet, {url: '../support/layout-child-sizes-worklet.js'});
</script>

View file

@ -0,0 +1,58 @@
<!DOCTYPE html>
<html class=reftest-wait>
<link rel="help" href="https://drafts.css-houdini.org/css-layout-api/#dom-layoutconstraintsoptions-percentageinlinesize">
<link rel="match" href="../green-square-ref.html">
<meta name="assert" content="This test checks that setting the percentage inline-size of children works as expected." />
<style>
.test {
writing-mode: vertical-rl;
background: red;
height: 100px;
}
.child {
writing-mode: horizontal-tb;
visibility: hidden;
width: 10px;
--percentage-inline-size: 20;
--inline-size-expected: 10px;
--block-size-expected: 10px;
}
@supports (display: layout(test)) {
.test {
background: green;
display: layout(test);
}
}
</style>
<script src="/common/reftest-wait.js"></script>
<script src="/common/worklet-reftest.js"></script>
<div class="test">
<!-- A fixed height shouldn't be affected by the percentage size. -->
<div class="child" style="height: 10px;"></div>
<!-- A percentage height should resolve itself against the percentageInlineSize. -->
<div class="child" style="height: 50%;"></div>
<!-- A percentage max-height should resolve itself against the percentageInlineSize. -->
<div class="child" style="height: 15px; max-height: 50%;"></div>
<!-- A percentage min-height should resolve itself against the percentageInlineSize. -->
<div class="child" style="height: 5px; min-height: 50%;"></div>
<!-- A replaced percentage height should resolve itself against the percentageInlineSize. -->
<img class="child" style="height: 50%;" />
<!-- A replaced percentage max-height should resolve itself against the percentageInlineSize. -->
<img class="child" style="height: 15px; max-height: 50%;" />
<!-- A replaced percentage min-height should resolve itself against the percentageInlineSize. -->
<img class="child" style="height: 5px; min-height: 50%;" />
<script>
importWorkletAndTerminateTestAfterAsyncPaint(CSS.layoutWorklet, {url: '../support/layout-child-sizes-worklet.js'});
</script>

View file

@ -0,0 +1,58 @@
<!DOCTYPE html>
<html class=reftest-wait>
<link rel="help" href="https://drafts.css-houdini.org/css-layout-api/#dom-layoutconstraintsoptions-percentageblocksize">
<link rel="match" href="../green-square-ref.html">
<meta name="assert" content="This test checks that setting the percentage block-size of children works as expected." />
<style>
.test {
writing-mode: vertical-rl;
background: red;
height: 100px;
}
.child {
writing-mode: vertical-rl;
visibility: hidden;
height: 10px;
--percentage-block-size: 20;
--inline-size-expected: 10px;
--block-size-expected: 10px;
}
@supports (display: layout(test)) {
.test {
background: green;
display: layout(test);
}
}
</style>
<script src="/common/reftest-wait.js"></script>
<script src="/common/worklet-reftest.js"></script>
<div class="test">
<!-- A fixed width shouldn't be affected by the percentage size. -->
<div class="child" style="width: 10px;"></div>
<!-- A percentage width should resolve itself against the percentageBlockSize. -->
<div class="child" style="width: 50%;"></div>
<!-- A percentage max-width should resolve itself against the percentageBlockSize. -->
<div class="child" style="width: 15px; max-width: 50%;"></div>
<!-- A percentage min-width should resolve itself against the percentageBlockSize. -->
<div class="child" style="width: 5px; min-width: 50%;"></div>
<!-- A replaced percentage width should resolve itself against the percentageBlockSize. -->
<img class="child" style="width: 50%;" />
<!-- A replaced percentage max-width should resolve itself against the percentageBlockSize. -->
<img class="child" style="width: 15px; max-width: 50%;" />
<!-- A replaced percentage min-width should resolve itself against the percentageBlockSize. -->
<img class="child" style="width: 5px; min-width: 50%;" />
<script>
importWorkletAndTerminateTestAfterAsyncPaint(CSS.layoutWorklet, {url: '../support/layout-child-sizes-worklet.js'});
</script>

View file

@ -13,6 +13,8 @@ registerLayout('test', class {
'--available-block-size', '--available-block-size',
'--fixed-inline-size', '--fixed-inline-size',
'--fixed-block-size', '--fixed-block-size',
'--percentage-inline-size',
'--percentage-block-size',
'--inline-size-expected', '--inline-size-expected',
'--block-size-expected' '--block-size-expected'
]; ];
@ -26,11 +28,15 @@ registerLayout('test', class {
const availableBlockSize = parseNumber(child.styleMap.get('--available-block-size')); const availableBlockSize = parseNumber(child.styleMap.get('--available-block-size'));
const fixedInlineSize = parseNumber(child.styleMap.get('--fixed-inline-size')); const fixedInlineSize = parseNumber(child.styleMap.get('--fixed-inline-size'));
const fixedBlockSize = parseNumber(child.styleMap.get('--fixed-block-size')); const fixedBlockSize = parseNumber(child.styleMap.get('--fixed-block-size'));
const percentageInlineSize = parseNumber(child.styleMap.get('--percentage-inline-size'));
const percentageBlockSize = parseNumber(child.styleMap.get('--percentage-block-size'));
return child.layoutNextFragment({ return child.layoutNextFragment({
availableInlineSize, availableInlineSize,
availableBlockSize, availableBlockSize,
fixedInlineSize, fixedInlineSize,
fixedBlockSize fixedBlockSize,
percentageInlineSize,
percentageBlockSize,
}); });
}); });

View file

@ -57,4 +57,19 @@ test(function(){
inner.style = '--initial-length-2: inherit'; inner.style = '--initial-length-2: inherit';
assert_equals(getComputedStyle(inner).getPropertyValue('--initial-length-2'), '0px'); assert_equals(getComputedStyle(inner).getPropertyValue('--initial-length-2'), '0px');
}, "Explicitly inheriting from a parent with no value results in initial value."); }, "Explicitly inheriting from a parent with no value results in initial value.");
test(function(){
CSS.registerProperty({name: '--inherited-length-4', syntax: '<length>', initialValue: '0px', inherits: true});
outer.style = '--inherited-length-4: 42px';
inner.style = '--inherited-length-4: var(--undefined)';
assert_equals(getComputedStyle(inner).getPropertyValue('--inherited-length-4'), '42px');
}, "Reference to undefined variable results in inherited value");
test(function(){
CSS.registerProperty({name: '--inherited-length-5', syntax: '<length>', initialValue: '0px', inherits: true});
outer.style = '--inherited-length-5: 42px';
inner.style = '--incompatible: nolength; --inherited-length-5: var(--incompatible)';
assert_equals(getComputedStyle(inner).getPropertyValue('--inherited-length-5'), '42px');
}, "Reference to syntax-incompatible variable results in inherited value");
</script> </script>

View file

@ -11,7 +11,7 @@
<style type="text/css"> <style type="text/css">
@font-face { @font-face {
font-family: 'mplus-1p-regular'; font-family: 'mplus-1p-regular';
src: url('/fonts/CSSTest/mplus-1p-regular.woff') format('woff'); src: url('/fonts/mplus-1p-regular.woff') format('woff');
} }
#wrapper { position: relative; } #wrapper { position: relative; }
.test { color: red; } .test { color: red; }

View file

@ -11,7 +11,7 @@
<style type="text/css"> <style type="text/css">
@font-face { @font-face {
font-family: 'mplus-1p-regular'; font-family: 'mplus-1p-regular';
src: url('/fonts/CSSTest/mplus-1p-regular.woff') format('woff'); src: url('/fonts/mplus-1p-regular.woff') format('woff');
} }
#wrapper { position: relative; } #wrapper { position: relative; }
.test { color: red; } .test { color: red; }

View file

@ -11,7 +11,7 @@
<style type="text/css"> <style type="text/css">
@font-face { @font-face {
font-family: 'mplus-1p-regular'; font-family: 'mplus-1p-regular';
src: url('/fonts/CSSTest/mplus-1p-regular.woff') format('woff'); src: url('/fonts/mplus-1p-regular.woff') format('woff');
} }
#wrapper { position: relative; } #wrapper { position: relative; }
.test { color: red; } .test { color: red; }

View file

@ -11,7 +11,7 @@
<style type="text/css"> <style type="text/css">
@font-face { @font-face {
font-family: 'mplus-1p-regular'; font-family: 'mplus-1p-regular';
src: url('/fonts/CSSTest/mplus-1p-regular.woff') format('woff'); src: url('/fonts/mplus-1p-regular.woff') format('woff');
} }
#wrapper { position: relative; } #wrapper { position: relative; }
.test { color: red; } .test { color: red; }

View file

@ -11,7 +11,7 @@
<style type="text/css"> <style type="text/css">
@font-face { @font-face {
font-family: 'mplus-1p-regular'; font-family: 'mplus-1p-regular';
src: url('/fonts/CSSTest/mplus-1p-regular.woff') format('woff'); src: url('/fonts/mplus-1p-regular.woff') format('woff');
} }
#wrapper { position: relative; } #wrapper { position: relative; }
.test { color: red; } .test { color: red; }

View file

@ -11,7 +11,7 @@
<style type="text/css"> <style type="text/css">
@font-face { @font-face {
font-family: 'mplus-1p-regular'; font-family: 'mplus-1p-regular';
src: url('/fonts/CSSTest/mplus-1p-regular.woff') format('woff'); src: url('/fonts/mplus-1p-regular.woff') format('woff');
} }
#wrapper { position: relative; } #wrapper { position: relative; }
.test { color: red; } .test { color: red; }

View file

@ -11,7 +11,7 @@
<style type="text/css"> <style type="text/css">
@font-face { @font-face {
font-family: 'mplus-1p-regular'; font-family: 'mplus-1p-regular';
src: url('/fonts/CSSTest/mplus-1p-regular.woff') format('woff'); src: url('/fonts/mplus-1p-regular.woff') format('woff');
} }
#wrapper { position: relative; } #wrapper { position: relative; }
.test { color: red; } .test { color: red; }

View file

@ -11,7 +11,7 @@
<style type="text/css"> <style type="text/css">
@font-face { @font-face {
font-family: 'mplus-1p-regular'; font-family: 'mplus-1p-regular';
src: url('/fonts/CSSTest/mplus-1p-regular.woff') format('woff'); src: url('/fonts/mplus-1p-regular.woff') format('woff');
} }
#wrapper { position: relative; } #wrapper { position: relative; }
.test { color: red; } .test { color: red; }

View file

@ -11,7 +11,7 @@
<style type="text/css"> <style type="text/css">
@font-face { @font-face {
font-family: 'mplus-1p-regular'; font-family: 'mplus-1p-regular';
src: url('/fonts/CSSTest/mplus-1p-regular.woff') format('woff'); src: url('/fonts/mplus-1p-regular.woff') format('woff');
} }
#wrapper { position: relative; } #wrapper { position: relative; }
.test { color: red; } .test { color: red; }

View file

@ -11,7 +11,7 @@
<style type="text/css"> <style type="text/css">
@font-face { @font-face {
font-family: 'mplus-1p-regular'; font-family: 'mplus-1p-regular';
src: url('/fonts/CSSTest/mplus-1p-regular.woff') format('woff'); src: url('/fonts/mplus-1p-regular.woff') format('woff');
} }
#wrapper { position: relative; } #wrapper { position: relative; }
.test { color: red; } .test { color: red; }

View file

@ -11,7 +11,7 @@
<style type="text/css"> <style type="text/css">
@font-face { @font-face {
font-family: 'mplus-1p-regular'; font-family: 'mplus-1p-regular';
src: url('/fonts/CSSTest/mplus-1p-regular.woff') format('woff'); src: url('/fonts/mplus-1p-regular.woff') format('woff');
} }
#wrapper { position: relative; } #wrapper { position: relative; }
.test { color: red; } .test { color: red; }

View file

@ -11,7 +11,7 @@
<style type="text/css"> <style type="text/css">
@font-face { @font-face {
font-family: 'mplus-1p-regular'; font-family: 'mplus-1p-regular';
src: url('/fonts/CSSTest/mplus-1p-regular.woff') format('woff'); src: url('/fonts/mplus-1p-regular.woff') format('woff');
} }
#wrapper { position: relative; } #wrapper { position: relative; }
.test { color: red; } .test { color: red; }

View file

@ -11,7 +11,7 @@
<style type="text/css"> <style type="text/css">
@font-face { @font-face {
font-family: 'mplus-1p-regular'; font-family: 'mplus-1p-regular';
src: url('/fonts/CSSTest/mplus-1p-regular.woff') format('woff'); src: url('/fonts/mplus-1p-regular.woff') format('woff');
} }
#wrapper { position: relative; } #wrapper { position: relative; }
.test { color: red; } .test { color: red; }

View file

@ -11,7 +11,7 @@
<style type="text/css"> <style type="text/css">
@font-face { @font-face {
font-family: 'mplus-1p-regular'; font-family: 'mplus-1p-regular';
src: url('/fonts/CSSTest/mplus-1p-regular.woff') format('woff'); src: url('/fonts/mplus-1p-regular.woff') format('woff');
} }
#wrapper { position: relative; } #wrapper { position: relative; }
.test { color: red; } .test { color: red; }

View file

@ -11,7 +11,7 @@
<style type="text/css"> <style type="text/css">
@font-face { @font-face {
font-family: 'mplus-1p-regular'; font-family: 'mplus-1p-regular';
src: url('/fonts/CSSTest/mplus-1p-regular.woff') format('woff'); src: url('/fonts/mplus-1p-regular.woff') format('woff');
} }
#wrapper { position: relative; } #wrapper { position: relative; }
.test { color: red; } .test { color: red; }

View file

@ -11,7 +11,7 @@
<style type="text/css"> <style type="text/css">
@font-face { @font-face {
font-family: 'mplus-1p-regular'; font-family: 'mplus-1p-regular';
src: url('/fonts/CSSTest/mplus-1p-regular.woff') format('woff'); src: url('/fonts/mplus-1p-regular.woff') format('woff');
} }
#wrapper { position: relative; } #wrapper { position: relative; }
.test { color: red; } .test { color: red; }

View file

@ -11,7 +11,7 @@
<style type="text/css"> <style type="text/css">
@font-face { @font-face {
font-family: 'mplus-1p-regular'; font-family: 'mplus-1p-regular';
src: url('/fonts/CSSTest/mplus-1p-regular.woff') format('woff'); src: url('/fonts/mplus-1p-regular.woff') format('woff');
} }
#wrapper { position: relative; } #wrapper { position: relative; }
.test { color: red; } .test { color: red; }

View file

@ -11,7 +11,7 @@
<style type="text/css"> <style type="text/css">
@font-face { @font-face {
font-family: 'mplus-1p-regular'; font-family: 'mplus-1p-regular';
src: url('/fonts/CSSTest/mplus-1p-regular.woff') format('woff'); src: url('/fonts/mplus-1p-regular.woff') format('woff');
} }
#wrapper { position: relative; } #wrapper { position: relative; }
.test { color: red; } .test { color: red; }

View file

@ -11,7 +11,7 @@
<style type="text/css"> <style type="text/css">
@font-face { @font-face {
font-family: 'mplus-1p-regular'; font-family: 'mplus-1p-regular';
src: url('/fonts/CSSTest/mplus-1p-regular.woff') format('woff'); src: url('/fonts/mplus-1p-regular.woff') format('woff');
} }
#wrapper { position: relative; } #wrapper { position: relative; }
.test { color: red; } .test { color: red; }

View file

@ -11,7 +11,7 @@
<style type="text/css"> <style type="text/css">
@font-face { @font-face {
font-family: 'mplus-1p-regular'; font-family: 'mplus-1p-regular';
src: url('/fonts/CSSTest/mplus-1p-regular.woff') format('woff'); src: url('/fonts/mplus-1p-regular.woff') format('woff');
} }
#wrapper { position: relative; } #wrapper { position: relative; }
.test { color: red; } .test { color: red; }

View file

@ -11,7 +11,7 @@
<style type="text/css"> <style type="text/css">
@font-face { @font-face {
font-family: 'mplus-1p-regular'; font-family: 'mplus-1p-regular';
src: url('/fonts/CSSTest/mplus-1p-regular.woff') format('woff'); src: url('/fonts/mplus-1p-regular.woff') format('woff');
} }
#wrapper { position: relative; } #wrapper { position: relative; }
.test { color: red; } .test { color: red; }

View file

@ -11,7 +11,7 @@
<style type="text/css"> <style type="text/css">
@font-face { @font-face {
font-family: 'mplus-1p-regular'; font-family: 'mplus-1p-regular';
src: url('/fonts/CSSTest/mplus-1p-regular.woff') format('woff'); src: url('/fonts/mplus-1p-regular.woff') format('woff');
} }
#wrapper { position: relative; } #wrapper { position: relative; }
.test { color: red; } .test { color: red; }

View file

@ -11,7 +11,7 @@
<style type="text/css"> <style type="text/css">
@font-face { @font-face {
font-family: 'mplus-1p-regular'; font-family: 'mplus-1p-regular';
src: url('/fonts/CSSTest/mplus-1p-regular.woff') format('woff'); src: url('/fonts/mplus-1p-regular.woff') format('woff');
} }
#wrapper { position: relative; } #wrapper { position: relative; }
.test { color: red; } .test { color: red; }

View file

@ -11,7 +11,7 @@
<style type="text/css"> <style type="text/css">
@font-face { @font-face {
font-family: 'mplus-1p-regular'; font-family: 'mplus-1p-regular';
src: url('/fonts/CSSTest/mplus-1p-regular.woff') format('woff'); src: url('/fonts/mplus-1p-regular.woff') format('woff');
} }
#wrapper { position: relative; } #wrapper { position: relative; }
.test { color: red; } .test { color: red; }

View file

@ -11,7 +11,7 @@
<style type="text/css"> <style type="text/css">
@font-face { @font-face {
font-family: 'mplus-1p-regular'; font-family: 'mplus-1p-regular';
src: url('/fonts/CSSTest/mplus-1p-regular.woff') format('woff'); src: url('/fonts/mplus-1p-regular.woff') format('woff');
} }
#wrapper { position: relative; } #wrapper { position: relative; }
.test { color: red; } .test { color: red; }

View file

@ -11,7 +11,7 @@
<style type="text/css"> <style type="text/css">
@font-face { @font-face {
font-family: 'mplus-1p-regular'; font-family: 'mplus-1p-regular';
src: url('/fonts/CSSTest/mplus-1p-regular.woff') format('woff'); src: url('/fonts/mplus-1p-regular.woff') format('woff');
} }
#wrapper { position: relative; } #wrapper { position: relative; }
.test { color: red; } .test { color: red; }

View file

@ -11,7 +11,7 @@
<style type="text/css"> <style type="text/css">
@font-face { @font-face {
font-family: 'mplus-1p-regular'; font-family: 'mplus-1p-regular';
src: url('/fonts/CSSTest/mplus-1p-regular.woff') format('woff'); src: url('/fonts/mplus-1p-regular.woff') format('woff');
} }
#wrapper { position: relative; } #wrapper { position: relative; }
.test { color: red; } .test { color: red; }

View file

@ -11,7 +11,7 @@
<style type="text/css"> <style type="text/css">
@font-face { @font-face {
font-family: 'mplus-1p-regular'; font-family: 'mplus-1p-regular';
src: url('/fonts/CSSTest/mplus-1p-regular.woff') format('woff'); src: url('/fonts/mplus-1p-regular.woff') format('woff');
} }
#wrapper { position: relative; } #wrapper { position: relative; }
.test { color: red; } .test { color: red; }

View file

@ -11,7 +11,7 @@
<style type="text/css"> <style type="text/css">
@font-face { @font-face {
font-family: 'mplus-1p-regular'; font-family: 'mplus-1p-regular';
src: url('/fonts/CSSTest/mplus-1p-regular.woff') format('woff'); src: url('/fonts/mplus-1p-regular.woff') format('woff');
} }
#wrapper { position: relative; } #wrapper { position: relative; }
.test { color: red; } .test { color: red; }

View file

@ -11,7 +11,7 @@
<style type="text/css"> <style type="text/css">
@font-face { @font-face {
font-family: 'mplus-1p-regular'; font-family: 'mplus-1p-regular';
src: url('/fonts/CSSTest/mplus-1p-regular.woff') format('woff'); src: url('/fonts/mplus-1p-regular.woff') format('woff');
} }
#wrapper { position: relative; } #wrapper { position: relative; }
.test { color: red; } .test { color: red; }

View file

@ -11,7 +11,7 @@
<style type="text/css"> <style type="text/css">
@font-face { @font-face {
font-family: 'mplus-1p-regular'; font-family: 'mplus-1p-regular';
src: url('/fonts/CSSTest/mplus-1p-regular.woff') format('woff'); src: url('/fonts/mplus-1p-regular.woff') format('woff');
} }
#wrapper { position: relative; } #wrapper { position: relative; }
.test { color: red; } .test { color: red; }

View file

@ -11,7 +11,7 @@
<style type="text/css"> <style type="text/css">
@font-face { @font-face {
font-family: 'mplus-1p-regular'; font-family: 'mplus-1p-regular';
src: url('/fonts/CSSTest/mplus-1p-regular.woff') format('woff'); src: url('/fonts/mplus-1p-regular.woff') format('woff');
} }
#wrapper { position: relative; } #wrapper { position: relative; }
.test { color: red; } .test { color: red; }

View file

@ -11,7 +11,7 @@
<style type="text/css"> <style type="text/css">
@font-face { @font-face {
font-family: 'mplus-1p-regular'; font-family: 'mplus-1p-regular';
src: url('/fonts/CSSTest/mplus-1p-regular.woff') format('woff'); src: url('/fonts/mplus-1p-regular.woff') format('woff');
} }
#wrapper { position: relative; } #wrapper { position: relative; }
.test { color: red; } .test { color: red; }

View file

@ -0,0 +1,42 @@
<!doctype html>
<title>CSS Test Reference</title>
<link rel="author" title="Emilio Cobos Álvarez" href="mailto:emilio@crisal.io">
<link rel="author" title="Mozilla" href="https://mozilla.org">
<style>
.scene {
width: 200px;
height: 200px;
perspective: 5000px;
}
.card {
width: 100%;
height: 100%;
transform-style: preserve-3d;
position: relative;
background: none;
border: 0;
padding: 0;
transform: rotateY(180deg);
}
.face {
position: absolute;
top: 0;
width: 100%;
height: 100%;
backface-visibility: hidden;
background: red;
}
.backface {
background: green;
transform: rotateY(180deg);
}
</style>
<div class="scene">
<div class="card">
<div class="face"></div>
<div class="face backface"></div>
</div>
</div>

View file

@ -0,0 +1,44 @@
<!doctype html>
<title>CSS Test: preserve-3d on buttons</title>
<link rel="author" title="Emilio Cobos Álvarez" href="mailto:emilio@crisal.io">
<link rel="author" title="Mozilla" href="https://mozilla.org">
<link rel="match" href="preserve3d-button-ref.html">
<link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1491864">
<style>
.scene {
width: 200px;
height: 200px;
perspective: 5000px;
}
.card {
width: 100%;
height: 100%;
transform-style: preserve-3d;
position: relative;
background: none;
border: 0;
padding: 0;
transform: rotateY(180deg);
}
.face {
position: absolute;
top: 0;
width: 100%;
height: 100%;
backface-visibility: hidden;
background: red;
}
.backface {
background: green;
transform: rotateY(180deg);
}
</style>
<div class="scene">
<button class="card">
<div class="face"></div>
<div class="face backface"></div>
</button>
</div>

View file

@ -0,0 +1,32 @@
<!DOCTYPE HTML>
<title>scrollIntoView on an SVG shape element</title>
<link rel="help" href="https://drafts.csswg.org/cssom-view/#dom-element-scrollintoview">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<svg width="8000" height="8000">
<rect width="100" height="100" fill="blue" y="1950" id="geometry"/>
<rect width="100" height="100" fill="blue" transform="translate(0, 2950)"
id="translated"/>
<rect width="100" height="100" fill="blue" transform="rotate(45, 50, 3950)"
id="rotated"/>
</svg>
<script>
add_completion_callback(() => {
document.querySelector("svg").remove();
window.scrollTo(0, 0);
});
for (let id of [ "geometry", "translated", "rotated" ]) {
test(t => {
let target = document.getElementById(id);
window.scrollTo(0, 0);
let bounds = target.getBoundingClientRect();
let expected = { x: bounds.left, y: bounds.top };
assert_not_equals(window.scrollX, expected.x, "x before scroll");
assert_not_equals(window.scrollY, expected.y, "y before scroll");
target.scrollIntoView({ block: "start", inline: "start" });
assert_approx_equals(window.scrollX, expected.x, 1, "x after scroll");
assert_approx_equals(window.scrollY, expected.y, 1, "y after scroll");
}, document.title + ", " + id);
}
</script>

View file

@ -0,0 +1,19 @@
<!DOCTYPE html>
<title>Filter Effects: The in attribute</title>
<link rel="author" title="Cameron McCormack" href="mailto:cam@mcc.id.au">
<link rel="help" href="https://www.w3.org/TR/filter-effects-1/#CommonAttributes">
<link rel="match" href="svg-unknown-input-ref.html">
<meta name="flags" content="svg">
<meta name="assert" content="References to non-existent results on a first primitive must be treated like SourceGraphic.">
<p>The test passes if you see a green square and no red.</p>
<svg width="100" height="100">
<defs>
<filter id="f" x="0" y="0" width="100" height="100" filterUnits="userSpaceOnUse">
<feComposite in="unknown" in2="SourceGraphic" result="a"/>
<feFlood flood-color="green" result="b"/>
<feComposite in="b" in2="a"/>
</filter>
</defs>
<rect width="100" height="100" fill="red"/>
<rect x="25" y="25" width="50" height="50" fill="green" filter="url(#f)"/>
</svg>

View file

@ -0,0 +1,18 @@
<!DOCTYPE html>
<title>Filter Effects: The in attribute</title>
<link rel="author" title="Cameron McCormack" href="mailto:cam@mcc.id.au">
<link rel="help" href="https://www.w3.org/TR/filter-effects-1/#CommonAttributes">
<link rel="match" href="svg-unknown-input-ref.html">
<meta name="flags" content="svg">
<meta name="assert" content="References to non-existent results on a subsequent primitive must be treated like the previous primitive result.">
<p>The test passes if you see a green square and no red.</p>
<svg width="100" height="100">
<defs>
<filter id="f" x="0" y="0" width="100" height="100" filterUnits="userSpaceOnUse">
<feFlood flood-color="green"/>
<feComposite in="unknown" in2="SourceGraphic"/>
</filter>
</defs>
<rect width="100" height="100" fill="red"/>
<rect x="25" y="25" width="50" height="50" fill="blue" filter="url(#f)"/>
</svg>

View file

@ -0,0 +1,8 @@
<!DOCTYPE html>
<title>Filter Effects: Reference</title>
<link rel="author" title="Cameron McCormack" href="mailto:cam@mcc.id.au">
<meta name="flags" content="svg">
<p>The test passes if you see a green square and no red.</p>
<svg width="100" height="100">
<rect width="100" height="100" fill="green"/>
</svg>

View file

@ -39,7 +39,7 @@ window.test_driver = {
* Set Window Rect command}. * Set Window Rect command}.
* *
* @param {Integer} x - The x coordinate of the top left of the window * @param {Integer} x - The x coordinate of the top left of the window
* @param {Integer} y - The x coordinate of the top left of the window * @param {Integer} y - The y coordinate of the top left of the window
* @param {Integer} width - The width of the window * @param {Integer} width - The width of the window
* @param {Integer} height - The width of the window * @param {Integer} height - The width of the window
* @returns {Promise} fulfilled after window rect is set occurs, or rejected in * @returns {Promise} fulfilled after window rect is set occurs, or rejected in
@ -67,7 +67,7 @@ window.test_driver_internal = {
* @param {Integer} x - The x coordinate of the top left of the window * @param {Integer} x - The x coordinate of the top left of the window
* @param {Integer} y - The x coordinate of the top left of the window * @param {Integer} y - The x coordinate of the top left of the window
* @param {Integer} width - The width of the window * @param {Integer} width - The width of the window
* @param {Integer} height - The width of the window * @param {Integer} height - The height of the window
* @returns {Promise} fulfilled after window rect is set occurs, or rejected in * @returns {Promise} fulfilled after window rect is set occurs, or rejected in
* the cases the WebDriver command errors * the cases the WebDriver command errors
*/ */
@ -314,7 +314,7 @@ promise_test(async t => {
``` ```
### What about testdriver-vendor.js? ### What about testdriver-vendor.js?
The file [testdriver-vendor.js](resources/testdriver-vendor.js) is the equivalent to testdriver-extra.js above, except is The file [testdriver-vendor.js](resources/testdriver-vendor.js) is the equivalent to testdriver-extra.js above, except it is
run instead of testdriver-extra.js in browser specific test environments. For example, in [Chromium LayoutTests](https://cs.chromium.org/chromium/src/third_party/WebKit/LayoutTests/?q=LayoutTests&sq=package:chromium&dr). run instead of testdriver-extra.js in browser specific test environments. For example, in [Chromium LayoutTests](https://cs.chromium.org/chromium/src/third_party/WebKit/LayoutTests/?q=LayoutTests&sq=package:chromium&dr).
### What if I need to return a value from my testdriver API? ### What if I need to return a value from my testdriver API?

View file

@ -37,7 +37,7 @@ const waitForLoad = new Promise(resolve => { addEventListener('load', resolve);
idl_test( idl_test(
['html'], ['html'],
['SVG', 'cssom', 'touchevents', 'uievents', 'dom'], ['SVG', 'cssom', 'touch-events', 'uievents', 'dom'],
async idlArray => { async idlArray => {
idlArray.add_objects({ idlArray.add_objects({
NodeList: ['document.getElementsByName("name")'], NodeList: ['document.getElementsByName("name")'],

View file

@ -7,7 +7,8 @@ enum SecurityPolicyViolationEventDisposition {
"enforce", "report" "enforce", "report"
}; };
[Constructor(DOMString type, optional SecurityPolicyViolationEventInit eventInitDict)] [Constructor(DOMString type, optional SecurityPolicyViolationEventInit eventInitDict),
Exposed=(Window,Worker)]
interface SecurityPolicyViolationEvent : Event { interface SecurityPolicyViolationEvent : Event {
readonly attribute USVString documentURI; readonly attribute USVString documentURI;
readonly attribute USVString referrer; readonly attribute USVString referrer;

View file

@ -125,6 +125,22 @@ interface SVGLengthList {
setter void (unsigned long index, SVGLength newItem); setter void (unsigned long index, SVGLength newItem);
}; };
[Exposed=Window]
interface SVGStringList {
readonly attribute unsigned long length;
readonly attribute unsigned long numberOfItems;
void clear();
DOMString initialize(DOMString newItem);
getter DOMString getItem(unsigned long index);
DOMString insertItemBefore(DOMString newItem, unsigned long index);
DOMString replaceItem(DOMString newItem, unsigned long index);
DOMString removeItem(unsigned long index);
DOMString appendItem(DOMString newItem);
setter void (unsigned long index, DOMString newItem);
};
[Exposed=Window] [Exposed=Window]
interface SVGAnimatedBoolean { interface SVGAnimatedBoolean {
attribute boolean baseVal; attribute boolean baseVal;
@ -185,22 +201,6 @@ interface SVGAnimatedLengthList {
[SameObject] readonly attribute SVGLengthList animVal; [SameObject] readonly attribute SVGLengthList animVal;
}; };
[Exposed=Window]
interface SVGStringList {
readonly attribute unsigned long length;
readonly attribute unsigned long numberOfItems;
void clear();
DOMString initialize(DOMString newItem);
getter DOMString getItem(unsigned long index);
DOMString insertItemBefore(DOMString newItem, unsigned long index);
DOMString replaceItem(DOMString newItem, unsigned long index);
DOMString removeItem(unsigned long index);
DOMString appendItem(DOMString newItem);
setter void (unsigned long index, DOMString newItem);
};
[Exposed=Window] [Exposed=Window]
interface SVGUnitTypes { interface SVGUnitTypes {
// Unit Types // Unit Types

View file

@ -4,17 +4,30 @@
// Source: Payment Method: Basic Card (https://w3c.github.io/payment-method-basic-card/) // Source: Payment Method: Basic Card (https://w3c.github.io/payment-method-basic-card/)
dictionary BasicCardRequest { dictionary BasicCardRequest {
sequence<DOMString> supportedNetworks; sequence<DOMString> supportedNetworks;
sequence<BasicCardType> supportedTypes; sequence<BasicCardType> supportedTypes;
}; };
dictionary BasicCardChangeDetails {
PaymentAddress? billingAddress;
};
enum BasicCardType { "credit", "debit", "prepaid" }; enum BasicCardType { "credit", "debit", "prepaid" };
dictionary BasicCardResponse { dictionary BasicCardResponse {
required DOMString cardNumber; required DOMString cardNumber;
DOMString cardholderName; DOMString cardholderName;
DOMString cardSecurityCode; DOMString cardSecurityCode;
DOMString expiryMonth; DOMString expiryMonth;
DOMString expiryYear; DOMString expiryYear;
PaymentAddress? billingAddress; PaymentAddress? billingAddress;
}; };
dictionary BasicCardErrors {
DOMString cardNumber;
DOMString cardholderName;
DOMString cardSecurityCode;
DOMString expiryMonth;
DOMString expiryYear;
AddressErrors billingAddress;
};

View file

@ -49,6 +49,8 @@ dictionary PaymentDetailsUpdate : PaymentDetailsBase {
DOMString error; DOMString error;
PaymentItem total; PaymentItem total;
AddressErrors shippingAddressErrors; AddressErrors shippingAddressErrors;
PayerErrorFields payerErrors;
object paymentMethodErrors;
}; };
dictionary PaymentDetailsModifier { dictionary PaymentDetailsModifier {

View file

@ -28,3 +28,15 @@ interface PictureInPictureWindow : EventTarget {
attribute EventHandler onresize; attribute EventHandler onresize;
}; };
[
Constructor(DOMString type, EnterPictureInPictureEventInit eventInitDict),
Exposed=Window
]
interface EnterPictureInPictureEvent : Event {
[SameObject] readonly attribute PictureInPictureWindow pictureInPictureWindow;
};
dictionary EnterPictureInPictureEventInit : EventInit {
required PictureInPictureWindow pictureInPictureWindow;
};

View file

@ -48,7 +48,6 @@ interface BaseAudioContext : EventTarget {
Promise<AudioBuffer> decodeAudioData (ArrayBuffer audioData, Promise<AudioBuffer> decodeAudioData (ArrayBuffer audioData,
optional DecodeSuccessCallback? successCallback, optional DecodeSuccessCallback? successCallback,
optional DecodeErrorCallback? errorCallback); optional DecodeErrorCallback? errorCallback);
Promise<void> resume ();
}; };
enum AudioContextLatencyCategory { enum AudioContextLatencyCategory {
@ -63,6 +62,7 @@ interface AudioContext : BaseAudioContext {
readonly attribute double baseLatency; readonly attribute double baseLatency;
readonly attribute double outputLatency; readonly attribute double outputLatency;
AudioTimestamp getOutputTimestamp (); AudioTimestamp getOutputTimestamp ();
Promise<void> resume ();
Promise<void> suspend (); Promise<void> suspend ();
Promise<void> close (); Promise<void> close ();
MediaElementAudioSourceNode createMediaElementSource (HTMLMediaElement mediaElement); MediaElementAudioSourceNode createMediaElementSource (HTMLMediaElement mediaElement);
@ -86,6 +86,7 @@ dictionary AudioTimestamp {
Constructor (unsigned long numberOfChannels, unsigned long length, float sampleRate)] Constructor (unsigned long numberOfChannels, unsigned long length, float sampleRate)]
interface OfflineAudioContext : BaseAudioContext { interface OfflineAudioContext : BaseAudioContext {
Promise<AudioBuffer> startRendering(); Promise<AudioBuffer> startRendering();
Promise<void> resume();
Promise<void> suspend(double suspendTime); Promise<void> suspend(double suspendTime);
readonly attribute unsigned long length; readonly attribute unsigned long length;
attribute EventHandler oncomplete; attribute EventHandler oncomplete;

View file

@ -230,8 +230,10 @@ dictionary RTCTransportStats : RTCStats {
DOMString selectedCandidatePairId; DOMString selectedCandidatePairId;
DOMString localCertificateId; DOMString localCertificateId;
DOMString remoteCertificateId; DOMString remoteCertificateId;
DOMString tlsVersion;
DOMString dtlsCipher; DOMString dtlsCipher;
DOMString srtpCipher; DOMString srtpCipher;
DOMString tlsGroup;
}; };
dictionary RTCIceCandidateStats : RTCStats { dictionary RTCIceCandidateStats : RTCStats {

View file

@ -99,7 +99,6 @@ self.addEventListener('paymentrequest', event => {
city: 'Reston', city: 'Reston',
country: 'US', country: 'US',
dependentLocality: '', dependentLocality: '',
languageCode: '',
organization: 'Google', organization: 'Google',
phone: '+15555555555', phone: '+15555555555',
postalCode: '20190', postalCode: '20190',

View file

@ -81,7 +81,6 @@ function runTests() {
assert_equals(response.details.billingAddress.city, 'Reston'); assert_equals(response.details.billingAddress.city, 'Reston');
assert_equals(response.details.billingAddress.country, 'US'); assert_equals(response.details.billingAddress.country, 'US');
assert_equals(response.details.billingAddress.dependentLocality, ''); assert_equals(response.details.billingAddress.dependentLocality, '');
assert_equals(response.details.billingAddress.languageCode, '');
assert_equals(response.details.billingAddress.organization, 'Google'); assert_equals(response.details.billingAddress.organization, 'Google');
assert_equals(response.details.billingAddress.phone, '+15555555555'); assert_equals(response.details.billingAddress.phone, '+15555555555');
assert_equals(response.details.billingAddress.postalCode, '20190'); assert_equals(response.details.billingAddress.postalCode, '20190');

View file

@ -25,7 +25,6 @@ const defaultBillingAddress = {
dependentLocality: '', dependentLocality: '',
postalCode: '1001', postalCode: '1001',
sortingCode: '', sortingCode: '',
languageCode: 'fa',
organization: 'w3c', organization: 'w3c',
recipient: 'web platform test', recipient: 'web platform test',
phone: '+93555555555', phone: '+93555555555',

View file

@ -74,7 +74,6 @@ function runManualTest(button, expected = {}) {
dependentLocality: '', dependentLocality: '',
postalCode: '6095', postalCode: '6095',
sortingCode: '', sortingCode: '',
languageCode: 'en',
organization: 'w3c', organization: 'w3c',
recipient: 'web platform test', recipient: 'web platform test',
phone: '+61733780000', phone: '+61733780000',

View file

@ -56,11 +56,6 @@ function retryShowsShippingAddressMember(button, error) {
The payment sheet shows "DEPENDENTLOCALITY ERROR" for the shipping address' dependentLocality. The payment sheet shows "DEPENDENTLOCALITY ERROR" for the shipping address' dependentLocality.
</button> </button>
</li> </li>
<li>
<button onclick="retryShowsShippingAddressMember(this, { languageCode: 'LANGUAGECODE ERROR' });">
The payment sheet shows "LANGUAGECODE ERROR" for the shipping address' languageCode.
</button>
</li>
<li> <li>
<button onclick="retryShowsShippingAddressMember(this, { organization: 'ORGANIZATION ERROR' });"> <button onclick="retryShowsShippingAddressMember(this, { organization: 'ORGANIZATION ERROR' });">
The payment sheet shows "ORGANIZATION ERROR" for the shipping address' organization. The payment sheet shows "ORGANIZATION ERROR" for the shipping address' organization.

View file

@ -19,6 +19,8 @@
["paymentRequestId", "PaymentRequest"], ["paymentRequestId", "PaymentRequest"],
["paymentRequestId", "PaymentResponse"], ["paymentRequestId", "PaymentResponse"],
// https://github.com/w3c/payment-request/pull/765
["languageCode", "PaymentAddress"],
].forEach(([member, interf]) => { ].forEach(([member, interf]) => {
test(() => { test(() => {
assert_false(member in window[interf].prototype); assert_false(member in window[interf].prototype);

View file

@ -8,9 +8,12 @@
<body></body> <body></body>
<script> <script>
promise_test(async t => { promise_test(async t => {
let pictureInPictureWindow;
const video = await loadVideo(); const video = await loadVideo();
video.addEventListener('enterpictureinpicture', t.step_func_done(event => { video.addEventListener('enterpictureinpicture', t.step_func_done(event => {
pictureInPictureWindow = event.pictureInPictureWindow;
assert_equals(event.target, video); assert_equals(event.target, video);
assert_equals(event.bubbles, true); assert_equals(event.bubbles, true);
assert_equals(event.cancelable, false); assert_equals(event.cancelable, false);
@ -18,6 +21,9 @@ promise_test(async t => {
assert_equals(document.pictureInPictureElement, video); assert_equals(document.pictureInPictureElement, video);
})); }));
return requestPictureInPictureWithTrustedClick(video); return requestPictureInPictureWithTrustedClick(video)
.then(pipWindow => {
assert_equals(pipWindow, pictureInPictureWindow);
})
}); });
</script> </script>

View file

@ -35,6 +35,7 @@ function onload_test() {
var context = new PerformanceContext(iframe.contentWindow.performance); var context = new PerformanceContext(iframe.contentWindow.performance);
var entries = context.getEntriesByType('resource'); var entries = context.getEntriesByType('resource');
assert_greater_than(entries.length, 0, "The iframe should have at least one resource timing entry.");
if(entries.length > 0) { if(entries.length > 0) {
entry = entries[0]; entry = entries[0];

View file

@ -35,6 +35,7 @@ function onload_test() {
var context = new PerformanceContext(iframe.contentWindow.performance); var context = new PerformanceContext(iframe.contentWindow.performance);
var entries = context.getEntriesByType('resource'); var entries = context.getEntriesByType('resource');
assert_greater_than(entries.length, 0, "The iframe should have at least one resource timing entry.");
if(entries.length > 0) { if(entries.length > 0) {
entry = entries[0]; entry = entries[0];

View file

@ -35,6 +35,7 @@ function onload_test() {
var context = new PerformanceContext(iframe.contentWindow.performance); var context = new PerformanceContext(iframe.contentWindow.performance);
var entries = context.getEntriesByType('resource'); var entries = context.getEntriesByType('resource');
assert_greater_than(entries.length, 0, "The iframe should have at least one resource timing entry.");
if(entries.length > 0) { if(entries.length > 0) {
entry = entries[0]; entry = entries[0];

View file

@ -0,0 +1,56 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Resource Timing TAO tests</title>
<link rel="author" title="Google" href="http://www.google.com/" />
<link rel="help" href="https://www.w3.org/TR/resource-timing-2/#timing-allow-origin"/>
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="resources/webperftestharness.js"></script>
<script src="resources/webperftestharnessextension.js"></script>
<script>
setup({explicit_done: true});
// explicitly test the namespace before we start testing
test_namespace("getEntriesByType");
var d;
var iframe;
var iframeBody;
var image;
var random = Math.random();
function setup_iframe() {
iframe = document.getElementById('frameContext');
d = iframe.contentWindow.document;
iframeBody = d.body;
iframe.addEventListener('load', onload_test, false);
}
function onload_test() {
if (window.performance.getEntriesByType === undefined) {
done();
return;
}
var context = new PerformanceContext(iframe.contentWindow.performance);
var entries = context.getEntriesByType('resource');
assert_greater_than(entries.length, 0, "The iframe should have at least one resource timing entry.");
if(entries.length > 0) {
entry = entries[0];
test_not_equals((entry.redirectStart + entry.redirectEnd + entry.domainLookupStart + entry.domainLookupEnd + entry.connectStart + entry.connectEnd + entry.secureConnectionStart + entry.requestStart + entry.responseStart), 0, 'redirectStart, redirectEnd, domainLookupStart, domainLookupEnd, connectStart, connectEnd, secureConnectionStart, requestStart, and responseStart -- should not be all returned as 0 when the HTTP response has multiple Timing-Allow-Origin header fields and the subsequent field value is separated by a comma, i.e. TAO algorithm passes');
}
done();
}
window.setup_iframe = setup_iframe;
</script>
</head>
<body>
<h1>Description</h1>
<p>This test validates that for a cross origin resource, the timing allow check algorithm will pass when the HTTP response has multiple Timing-Allow-Origin header fields and the subsequent field value is separated by a comma.</p>
<div id="log"></div>
<iframe id="frameContext" src="resources/iframe_TAO_multi_wildcard.html"></iframe>
</body>
</html>

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