Update web-platform-tests to revision cfada7e6cb379699fa94c7ed8fcb97082327e10c

This commit is contained in:
WPT Sync Bot 2019-07-31 10:22:21 +00:00
parent 87e7e3d429
commit 06b00da16b
179 changed files with 6103 additions and 1186 deletions

View file

@ -34,3 +34,6 @@
[Revoke blob URL after creating Request, will fetch]
expected: FAIL
[Revoke blob URL after calling fetch, fetch should succeed]
expected: FAIL

File diff suppressed because it is too large Load diff

View file

@ -0,0 +1,2 @@
[float-006.xht]
expected: FAIL

View file

@ -0,0 +1,4 @@
[elementFromPoint-list-001.html]
[<li>Outside 1</li>]
expected: FAIL

View file

@ -0,0 +1,28 @@
[scrollIntoView-sideways-lr-writing-mode-and-rtl-direction.html]
[scrollIntoView({"block":"center","inline":"center"})]
expected: FAIL
[scrollIntoView({"block":"end","inline":"start"})]
expected: FAIL
[scrollIntoView({"block":"start","inline":"center"})]
expected: FAIL
[scrollIntoView({"block":"center","inline":"start"})]
expected: FAIL
[scrollIntoView({"block":"start","inline":"start"})]
expected: FAIL
[scrollIntoView({"block":"end","inline":"center"})]
expected: FAIL
[scrollIntoView({"block":"end","inline":"end"})]
expected: FAIL
[scrollIntoView({"block":"start","inline":"end"})]
expected: FAIL
[scrollIntoView({"block":"center","inline":"end"})]
expected: FAIL

View file

@ -0,0 +1,28 @@
[scrollIntoView-sideways-lr-writing-mode.html]
[scrollIntoView({"block":"center","inline":"center"})]
expected: FAIL
[scrollIntoView({"block":"end","inline":"start"})]
expected: FAIL
[scrollIntoView({"block":"start","inline":"center"})]
expected: FAIL
[scrollIntoView({"block":"center","inline":"start"})]
expected: FAIL
[scrollIntoView({"block":"start","inline":"start"})]
expected: FAIL
[scrollIntoView({"block":"end","inline":"center"})]
expected: FAIL
[scrollIntoView({"block":"end","inline":"end"})]
expected: FAIL
[scrollIntoView({"block":"start","inline":"end"})]
expected: FAIL
[scrollIntoView({"block":"center","inline":"end"})]
expected: FAIL

View file

@ -0,0 +1,28 @@
[scrollIntoView-sideways-rl-writing-mode-and-rtl-direction.html]
[scrollIntoView({"block":"center","inline":"center"})]
expected: FAIL
[scrollIntoView({"block":"end","inline":"start"})]
expected: FAIL
[scrollIntoView({"block":"start","inline":"center"})]
expected: FAIL
[scrollIntoView({"block":"center","inline":"start"})]
expected: FAIL
[scrollIntoView({"block":"start","inline":"start"})]
expected: FAIL
[scrollIntoView({"block":"end","inline":"center"})]
expected: FAIL
[scrollIntoView({"block":"end","inline":"end"})]
expected: FAIL
[scrollIntoView({"block":"start","inline":"end"})]
expected: FAIL
[scrollIntoView({"block":"center","inline":"end"})]
expected: FAIL

View file

@ -0,0 +1,28 @@
[scrollIntoView-sideways-rl-writing-mode.html]
[scrollIntoView({"block":"center","inline":"center"})]
expected: FAIL
[scrollIntoView({"block":"end","inline":"start"})]
expected: FAIL
[scrollIntoView({"block":"start","inline":"center"})]
expected: FAIL
[scrollIntoView({"block":"center","inline":"start"})]
expected: FAIL
[scrollIntoView({"block":"start","inline":"start"})]
expected: FAIL
[scrollIntoView({"block":"end","inline":"center"})]
expected: FAIL
[scrollIntoView({"block":"end","inline":"end"})]
expected: FAIL
[scrollIntoView({"block":"start","inline":"end"})]
expected: FAIL
[scrollIntoView({"block":"center","inline":"end"})]
expected: FAIL

View file

@ -0,0 +1,4 @@
[selectors-case-sensitive-001.html]
[Test element names are case-insensitive only in ASCII range]
expected: FAIL

View file

@ -312,24 +312,27 @@
[<iframe>: separate response Content-Type: */* text/html]
expected: FAIL
[<iframe>: combined response Content-Type: text/html;" text/plain]
expected: FAIL
[<iframe>: separate response Content-Type: text/plain */*]
expected: FAIL
[<iframe>: combined response Content-Type: text/html */*;charset=gbk]
expected: FAIL
[<iframe>: combined response Content-Type: text/html;charset=gbk text/plain text/html]
expected: FAIL
[<iframe>: combined response Content-Type: text/html */*]
expected: FAIL
[<iframe>: combined response Content-Type: text/html;x=" text/plain]
expected: FAIL
[<iframe>: separate response Content-Type: text/plain */*;charset=gbk]
expected: FAIL
[<iframe>: separate response Content-Type: text/html */*;charset=gbk]
expected: FAIL
[<iframe>: separate response Content-Type: text/html */*]
expected: FAIL
[<iframe>: separate response Content-Type: text/html;x=" text/plain]
expected: FAIL
[<iframe>: combined response Content-Type: text/html;" \\" text/plain]
expected: FAIL
[<iframe>: separate response Content-Type: text/html;" \\" text/plain]
expected: FAIL

View file

@ -53,3 +53,6 @@
[combined text/javascript ]
expected: FAIL
[separate text/javascript;charset=windows-1252 text/javascript]
expected: FAIL

View file

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

View file

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

View file

@ -0,0 +1,4 @@
[creating_browsing_context_test_01.html]
[first argument: absolute url]
expected: FAIL

View file

@ -1,24 +1,5 @@
[open-features-negative-innerwidth-innerheight.html]
type: testharness
expected: TIMEOUT
[HTML: window.open `features`: negative values for legacy `innerwidth`, `innerheight`]
expected: FAIL
[features "innerheight=-404.5" should NOT set "height=404"]
expected: TIMEOUT
[features "innerwidth=-404.5" should NOT set "width=404"]
expected: TIMEOUT
[features "innerwidth=-404" should NOT set "width=404"]
expected: TIMEOUT
[features "innerheight=-404e1" should NOT set "height=404"]
expected: TIMEOUT
[features "innerheight=-404" should NOT set "height=404"]
expected: TIMEOUT
[features "innerwidth=-404e1" should NOT set "width=404"]
expected: TIMEOUT

View file

@ -1,24 +1,5 @@
[open-features-negative-top-left.html]
type: testharness
expected: TIMEOUT
[HTML: window.open `features`: negative values for `top`, `left`]
expected: FAIL
[features "top=-204" should NOT set "top=204"]
expected: TIMEOUT
[features "top=-204.5" should NOT set "top=204"]
expected: TIMEOUT
[features "left=-204" should NOT set "left=204"]
expected: TIMEOUT
[features "top=-0" should NOT set "top=204"]
expected: TIMEOUT
[features "left=-204.5" should NOT set "left=204"]
expected: TIMEOUT
[features "left=-0" should NOT set "left=204"]
expected: TIMEOUT

View file

@ -1,24 +1,5 @@
[open-features-negative-width-height.html]
type: testharness
expected: TIMEOUT
[HTML: window.open `features`: negative values for `width`, `height`]
expected: FAIL
[features "height=-404" should NOT set "height=404"]
expected: TIMEOUT
[features "height=-404e1" should NOT set "height=404"]
expected: TIMEOUT
[features "height=-404.5" should NOT set "height=404"]
expected: TIMEOUT
[features "width=-404" should NOT set "width=404"]
expected: TIMEOUT
[features "width=-404e1" should NOT set "width=404"]
expected: TIMEOUT
[features "width=-404.5" should NOT set "width=404"]
expected: TIMEOUT

View file

@ -1,48 +1,32 @@
[open-features-non-integer-height.html]
type: testharness
expected: TIMEOUT
[HTML: window.open `features`: non-integer values for feature `height`]
expected: FAIL
[features "height=405*3" should set "height=405"]
expected: TIMEOUT
expected: FAIL
[features "height=405.32" should set "height=405"]
expected: TIMEOUT
expected: FAIL
[features "height=405e1" should set "height=405"]
expected: TIMEOUT
expected: FAIL
[features "height=405/5" should set "height=405"]
expected: TIMEOUT
expected: FAIL
[features "height=405^4" should set "height=405"]
expected: TIMEOUT
expected: FAIL
[features "height=405.5" should set "height=405"]
expected: TIMEOUT
expected: FAIL
[features "height=405e-1" should set "height=405"]
expected: TIMEOUT
expected: FAIL
[features "height=405 " should set "height=405"]
expected: TIMEOUT
expected: FAIL
[features "height=405LLl" should set "height=405"]
expected: TIMEOUT
[features "height=/404" should NOT set "height=404"]
expected: TIMEOUT
[top=0,left=0,width=401,: absence of feature "height" should be treated same as "height=0"]
expected: TIMEOUT
[top=0,left=0: absence of feature "height" should be treated same as "height=0"]
expected: TIMEOUT
[features "height=_404" should NOT set "height=404"]
expected: TIMEOUT
[features "height=L404" should NOT set "height=404"]
expected: TIMEOUT
expected: FAIL

View file

@ -1,42 +1,32 @@
[open-features-non-integer-innerheight.html]
type: testharness
expected: TIMEOUT
[HTML: window.open `features`: non-integer values for legacy feature `innerheight`]
expected: FAIL
[features "innerheight=405e-1" should set "height=405"]
expected: TIMEOUT
expected: FAIL
[features "innerheight=405LLl" should set "height=405"]
expected: TIMEOUT
expected: FAIL
[features "innerheight=405^4" should set "height=405"]
expected: TIMEOUT
expected: FAIL
[features "innerheight=405e1" should set "height=405"]
expected: TIMEOUT
expected: FAIL
[features "innerheight=405 " should set "height=405"]
expected: TIMEOUT
expected: FAIL
[features "innerheight=405/5" should set "height=405"]
expected: TIMEOUT
expected: FAIL
[features "innerheight=405.32" should set "height=405"]
expected: TIMEOUT
expected: FAIL
[features "innerheight=405.5" should set "height=405"]
expected: TIMEOUT
expected: FAIL
[features "innerheight=405*3" should set "height=405"]
expected: TIMEOUT
[features "innerheight=_404" should NOT set "height=404"]
expected: TIMEOUT
[features "innerheight=L404" should NOT set "height=404"]
expected: TIMEOUT
[features "innerheight=/404" should NOT set "height=404"]
expected: TIMEOUT
expected: FAIL

View file

@ -1,42 +1,32 @@
[open-features-non-integer-innerwidth.html]
type: testharness
expected: TIMEOUT
[HTML: window.open `features`: non-integer values for legacy feature `innerwidth`]
expected: FAIL
[features "innerwidth=405e-1" should set "width=405"]
expected: TIMEOUT
expected: FAIL
[features "innerwidth=405*3" should set "width=405"]
expected: TIMEOUT
expected: FAIL
[features "innerwidth=405.5" should set "width=405"]
expected: TIMEOUT
expected: FAIL
[features "innerwidth=405e1" should set "width=405"]
expected: TIMEOUT
expected: FAIL
[features "innerwidth=405.32" should set "width=405"]
expected: TIMEOUT
expected: FAIL
[features "innerwidth=405 " should set "width=405"]
expected: TIMEOUT
expected: FAIL
[features "innerwidth=405LLl" should set "width=405"]
expected: TIMEOUT
expected: FAIL
[features "innerwidth=405/5" should set "width=405"]
expected: TIMEOUT
expected: FAIL
[features "innerwidth=405^4" should set "width=405"]
expected: TIMEOUT
[features "innerwidth=/404" should NOT set "width=404"]
expected: TIMEOUT
[features "innerwidth=_404" should NOT set "width=404"]
expected: TIMEOUT
[features "innerwidth=L404" should NOT set "width=404"]
expected: TIMEOUT
expected: FAIL

View file

@ -1,42 +1,32 @@
[open-features-non-integer-left.html]
type: testharness
expected: TIMEOUT
[HTML: window.open `features`: non-integer values for feature `left`]
expected: FAIL
[features "left=105e1" should set "left=105"]
expected: TIMEOUT
expected: FAIL
[features "left=105 " should set "left=105"]
expected: TIMEOUT
expected: FAIL
[features "left=105/5" should set "left=105"]
expected: TIMEOUT
expected: FAIL
[features "left=105e-1" should set "left=105"]
expected: TIMEOUT
expected: FAIL
[features "left=105^4" should set "left=105"]
expected: TIMEOUT
expected: FAIL
[features "left=105LLl" should set "left=105"]
expected: TIMEOUT
expected: FAIL
[features "left=105.32" should set "left=105"]
expected: TIMEOUT
expected: FAIL
[features "left=105*3" should set "left=105"]
expected: TIMEOUT
expected: FAIL
[features "left=105.5" should set "left=105"]
expected: TIMEOUT
[features "left=L104" should NOT set "left=104"]
expected: TIMEOUT
[features "left=/104" should NOT set "left=104"]
expected: TIMEOUT
[features "left=_104" should NOT set "left=104"]
expected: TIMEOUT
expected: FAIL

View file

@ -1,42 +1,32 @@
[open-features-non-integer-screenx.html]
type: testharness
expected: TIMEOUT
[HTML: window.open `features`: non-integer values for legacy feature `screenx`]
expected: FAIL
[features "screenx=105.5" should set "left=105"]
expected: TIMEOUT
expected: FAIL
[features "screenx=105e1" should set "left=105"]
expected: TIMEOUT
expected: FAIL
[features "screenx=105 " should set "left=105"]
expected: TIMEOUT
expected: FAIL
[features "screenx=105*3" should set "left=105"]
expected: TIMEOUT
expected: FAIL
[features "screenx=105e-1" should set "left=105"]
expected: TIMEOUT
expected: FAIL
[features "screenx=105^4" should set "left=105"]
expected: TIMEOUT
expected: FAIL
[features "screenx=105LLl" should set "left=105"]
expected: TIMEOUT
expected: FAIL
[features "screenx=105/5" should set "left=105"]
expected: TIMEOUT
expected: FAIL
[features "screenx=105.32" should set "left=105"]
expected: TIMEOUT
[features "screenx=_104" should NOT set "left=104"]
expected: TIMEOUT
[features "screenx=L104" should NOT set "left=104"]
expected: TIMEOUT
[features "screenx=/104" should NOT set "left=104"]
expected: TIMEOUT
expected: FAIL

View file

@ -1,42 +1,32 @@
[open-features-non-integer-screeny.html]
type: testharness
expected: TIMEOUT
[HTML: window.open `features`: non-integer values for legacy feature `screeny`]
expected: FAIL
[features "screeny=405^4" should set "height=405"]
expected: TIMEOUT
expected: FAIL
[features "screeny=405e-1" should set "height=405"]
expected: TIMEOUT
expected: FAIL
[features "screeny=405LLl" should set "height=405"]
expected: TIMEOUT
expected: FAIL
[features "screeny=405e1" should set "height=405"]
expected: TIMEOUT
expected: FAIL
[features "screeny=405 " should set "height=405"]
expected: TIMEOUT
expected: FAIL
[features "screeny=405/5" should set "height=405"]
expected: TIMEOUT
expected: FAIL
[features "screeny=405*3" should set "height=405"]
expected: TIMEOUT
expected: FAIL
[features "screeny=405.32" should set "height=405"]
expected: TIMEOUT
expected: FAIL
[features "screeny=405.5" should set "height=405"]
expected: TIMEOUT
[features "screeny=_404" should NOT set "height=404"]
expected: TIMEOUT
[features "screeny=L404" should NOT set "height=404"]
expected: TIMEOUT
[features "screeny=/404" should NOT set "height=404"]
expected: TIMEOUT
expected: FAIL

View file

@ -1,42 +1,32 @@
[open-features-non-integer-top.html]
type: testharness
expected: TIMEOUT
[HTML: window.open `features`: non-integer values for feature `top`]
expected: FAIL
[features "top=105/5" should set "top=105"]
expected: TIMEOUT
expected: FAIL
[features "top=105*3" should set "top=105"]
expected: TIMEOUT
expected: FAIL
[features "top=105LLl" should set "top=105"]
expected: TIMEOUT
expected: FAIL
[features "top=105e-1" should set "top=105"]
expected: TIMEOUT
expected: FAIL
[features "top=105.32" should set "top=105"]
expected: TIMEOUT
expected: FAIL
[features "top=105e1" should set "top=105"]
expected: TIMEOUT
expected: FAIL
[features "top=105 " should set "top=105"]
expected: TIMEOUT
expected: FAIL
[features "top=105^4" should set "top=105"]
expected: TIMEOUT
expected: FAIL
[features "top=105.5" should set "top=105"]
expected: TIMEOUT
[features "top=/104" should NOT set "top=104"]
expected: TIMEOUT
[features "top=_104" should NOT set "top=104"]
expected: TIMEOUT
[features "top=L104" should NOT set "top=104"]
expected: TIMEOUT
expected: FAIL

View file

@ -1,48 +1,32 @@
[open-features-non-integer-width.html]
type: testharness
expected: TIMEOUT
[HTML: window.open `features`: non-integer values for feature `width`]
expected: FAIL
[features "width=405^4" should set "width=405"]
expected: TIMEOUT
expected: FAIL
[features "width=405.5" should set "width=405"]
expected: TIMEOUT
expected: FAIL
[features "width=405e1" should set "width=405"]
expected: TIMEOUT
expected: FAIL
[features "width=405 " should set "width=405"]
expected: TIMEOUT
expected: FAIL
[features "width=405.32" should set "width=405"]
expected: TIMEOUT
expected: FAIL
[features "width=405LLl" should set "width=405"]
expected: TIMEOUT
expected: FAIL
[features "width=405*3" should set "width=405"]
expected: TIMEOUT
expected: FAIL
[features "width=405e-1" should set "width=405"]
expected: TIMEOUT
expected: FAIL
[features "width=405/5" should set "width=405"]
expected: TIMEOUT
[top=0,left=0: absence of feature "width" should be treated same as "width=0"]
expected: TIMEOUT
[features "width=_404" should NOT set "width=404"]
expected: TIMEOUT
[top=0,left=0,height=401,: absence of feature "width" should be treated same as "width=0"]
expected: TIMEOUT
[features "width=/404" should NOT set "width=404"]
expected: TIMEOUT
[features "width=L404" should NOT set "width=404"]
expected: TIMEOUT
expected: FAIL

View file

@ -1,11 +1,7 @@
[form-submission-algorithm.html]
expected: TIMEOUT
[If form's firing submission events is true, then return; 'submit' event]
expected: FAIL
[If form's firing submission events is true, then return; 'invalid' event]
expected: FAIL
[Cannot navigate (after constructing the entry list)]
expected: TIMEOUT

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,4 @@
[DOMContentLoaded-defer.html]
[The end: DOMContentLoaded and defer scripts]
expected: FAIL

View file

@ -1,5 +1,4 @@
[promise-rejection-events.html]
expected: TIMEOUT
[delayed handling: delaying handling rejected promise created from createImageBitmap will cause both events to fire]
expected: FAIL
@ -9,6 +8,3 @@
[no unhandledrejection/rejectionhandled: rejection handler attached synchronously to a promise created from createImageBitmap]
expected: FAIL
[rejectionhandled is dispatched from a queued task, and not immediately]
expected: TIMEOUT

View file

@ -11,3 +11,6 @@
[The iframe should have one resource timing entry.]
expected: FAIL
[responseEnd should not be 0 in timing-allow cross-origin request.]
expected: FAIL

View file

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

View file

@ -14,3 +14,15 @@
[X 5: buffer.copyToChannel(x, 0, 16) incorrectly threw IndexSizeError: "The index is not in the allowed range.".]
expected: FAIL
[X 4: buffer.copyToChannel(x, 0, -1) incorrectly threw IndexSizeError: "The index is not in the allowed range.".]
expected: FAIL
[< [copyFrom-exceptions\] 2 out of 11 assertions were failed.]
expected: FAIL
[< [copyTo-exceptions\] 2 out of 10 assertions were failed.]
expected: FAIL
[X 5: buffer.copyFromChannel(x, 0, -1) incorrectly threw IndexSizeError: "The index is not in the allowed range.".]
expected: FAIL

View file

@ -146,3 +146,9 @@
[X SNR (NaN dB) is not greater than or equal to 65.737. Got NaN.]
expected: FAIL
[X Stitched sine-wave buffers at sample rate 43800 does not equal [0,0.06264832615852356,0.12505052983760834,0.18696144223213196,0.24813786149024963,0.308339387178421,0.36732959747314453,0.4248766601085663,0.480754554271698,0.5347436666488647,0.5866320133209229,0.6362156271934509,0.6832997798919678,0.7276994585990906,0.7692402601242065,0.8077589869499207...\] with an element-wise tolerance of {"absoluteThreshold":0.0038986,"relativeThreshold":0}.\n\tIndex\tActual\t\t\tExpected\t\tAbsError\t\tRelError\t\tTest threshold\n\t[30\]\t9.4836157560348511e-1\t9.5236867666244507e-1\t4.0071010589599609e-3\t4.2075103446311962e-3\t3.8985999999999999e-3\n\t[31\]\t9.2646563053131104e-1\t9.3139332532882690e-1\t4.9276947975158691e-3\t5.2906700783754857e-3\t3.8985999999999999e-3\n\t[32\]\t9.0087991952896118e-1\t9.0675884485244751e-1\t5.8789253234863281e-3\t6.4834496590358351e-3\t3.8985999999999999e-3\n\t[33\]\t8.7170630693435669e-1\t8.7856203317642212e-1\t6.8557262420654297e-3\t7.8033490899654511e-3\t3.8985999999999999e-3\n\t[34\]\t8.3906102180480957e-1\t8.4691369533538818e-1\t7.8526735305786133e-3\t9.2721059699818163e-3\t3.8985999999999999e-3\n\t...and 31037 more errors.\n\tMax AbsError of 1.0350983311555801e+21 at index of 39267.\n\t[39267\]\t-1.0350983311555801e+21\t-9.8276454210281372e-1\t1.0350983311555801e+21\t1.0532516048460481e+21\t3.8985999999999999e-3\n\tMax RelError of 2.1757020142640641e+21 at index of 20238.\n\t[20238\]\t-1.0350893239563253e+21\t-4.7574958205223083e-1\t1.0350893239563253e+21\t2.1757020142640641e+21\t3.8985999999999999e-3\n]
expected: FAIL
[X SNR (-379.8758083905784 dB) is not greater than or equal to 65.737. Got -379.8758083905784.]
expected: FAIL

View file

@ -1,5 +1,5 @@
[xrBoundedReferenceSpace_updates.https.html]
expected: ERROR
expected: TIMEOUT
['XRBoundedReferenceSpace updates properly when the changes are applied]
expected: TIMEOUT

View file

@ -31,9 +31,16 @@ function wait_for_message(iframe) {
const script =
'<script>' +
' window.onmessage = () => {' +
' try { ' +
' if (!indexedDB || !indexedDB.databases) {' +
' window.parent.postMessage({result: "indexedDB.databases undefined"}, "*")' +
' }' +
' indexedDB.databases().then(' +
' () => window.parent.postMessage({result: "no exception"}, "*"),' +
' ex => window.parent.postMessage({result: ex.name}, "*"));' +
' } catch(e) { ' +
' window.parent.postMessage({result: e.name + " thrown, not rejected"}, "*")' +
' }'+
' };' +
'<\/script>';
@ -50,6 +57,6 @@ promise_test(async t => {
iframe.contentWindow.postMessage({}, '*');
const message = await wait_for_message(iframe);
assert_equals(message.result, 'SecurityError',
'Exception should be SecurityError');
'Promise should be rejected with SecurityError');
}, 'IDBFactory.databases() in sandboxed iframe should reject');
</script>

View file

@ -0,0 +1,9 @@
<!DOCTYPE html>
<link rel="help" href="https://www.w3.org/TR/CSS22/visudet.html#float-width" title="10.3.5 Floating, non-replaced elements">
<link rel="match" href="../../reference/ref-filled-green-100px-square-only.html">
<p>Test passes if there is a filled green square.</p>
<div style="width: 0px;">
<div style="float: left; width: 100px; height: 50px; background: green;"></div>
<div style="float: left; width: 100px; height: 50px; background: green;"></div>
</div>

View file

@ -19,10 +19,15 @@
<div id="target"></div>
<script>
test_computed_value("flex-basis", "1px");
test_computed_value("flex-basis", "calc(10px + 0.5em)", "30px");
test_computed_value("flex-basis", "calc(10px - 0.5em)", "0px");
test_computed_value("flex-basis", "400%");
test_computed_value("flex-basis", "auto");
test_computed_value("flex-basis", "calc(10px + 0.5em)", "30px");
test_computed_value("flex-basis", "calc(10px - 0.5em)", "0px");
test_computed_value("flex-basis", "calc(10%)", "10%");
// https://github.com/w3c/csswg-drafts/issues/3482
test_computed_value("flex-basis", "calc(0% + 10px)", "calc(0% + 10px)");
test_computed_value("flex-basis", "calc(10% + 0px)", "10%");
</script>
</body>
</html>

View file

@ -0,0 +1,15 @@
<!doctype html>
<title>CSS test reference</title>
<link rel="author" href="mailto:emilio@crisal.io" title="Emilio Cobos Álvarez">
<link rel="author" href="https://mozilla.org" title="Mozilla">
<style>
.ancestor {
width: 100px;
height: 100px;
position: fixed;
left: 100px;
top: 0;
background-color: green;
}
</style>
<div class="ancestor"></div>

View file

@ -0,0 +1,30 @@
<!doctype html>
<title>CSS test: movement of fixed-position ancestor correctly moves fixed-position descendant depending on the static position</title>
<link rel="help" href="https://drafts.csswg.org/css-position/#size-and-position-details">
<link rel="match" href="hypothetical-dynamic-change-001-ref.html">
<link rel="author" href="mailto:emilio@crisal.io" title="Emilio Cobos Álvarez">
<link rel="author" href="https://mozilla.org" title="Mozilla">
<style>
.ancestor, .child {
position: fixed;
width: 100px;
height: 100px;
background-color: green;
/* NOTE: child remains auto-positioned */
}
.ancestor {
left: 0;
top: 0;
background-color: red;
}
</style>
<div class="ancestor">
<div class="child"></div>
</div>
<script>
onload = function() {
let ancestor = document.querySelector(".ancestor");
window.unused = ancestor.getBoundingClientRect();
ancestor.style.left = "100px";
}
</script>

View file

@ -0,0 +1,33 @@
<!doctype html>
<title>CSS test: movement of absolute-position ancestor correctly moves fixed-position descendant depending on the static position</title>
<link rel="help" href="https://drafts.csswg.org/css-position/#size-and-position-details">
<link rel="match" href="hypothetical-dynamic-change-001-ref.html">
<link rel="author" href="mailto:emilio@crisal.io" title="Emilio Cobos Álvarez">
<link rel="author" href="https://mozilla.org" title="Mozilla">
<style>
.ancestor, .child {
width: 100px;
height: 100px;
background-color: green;
}
.child {
position: fixed;
/* NOTE: child remains auto-positioned */
}
.ancestor {
position: absolute;
left: 0;
top: 0;
background-color: red;
}
</style>
<div class="ancestor">
<div class="child"></div>
</div>
<script>
onload = function() {
let ancestor = document.querySelector(".ancestor");
window.unused = ancestor.getBoundingClientRect();
ancestor.style.left = "100px";
}
</script>

View file

@ -0,0 +1,34 @@
<!doctype html>
<title>CSS test: movement of relative-position ancestor correctly moves fixed-position descendant depending on the static position</title>
<link rel="help" href="https://drafts.csswg.org/css-position/#size-and-position-details">
<link rel="match" href="hypothetical-dynamic-change-001-ref.html">
<link rel="author" href="mailto:emilio@crisal.io" title="Emilio Cobos Álvarez">
<link rel="author" href="https://mozilla.org" title="Mozilla">
<style>
body { margin: 0 }
.ancestor, .child {
width: 100px;
height: 100px;
background-color: green;
}
.child {
position: fixed;
/* NOTE: child remains auto-positioned */
}
.ancestor {
position: relative;
left: 0;
top: 0;
background-color: red;
}
</style>
<div class="ancestor">
<div class="child"></div>
</div>
<script>
onload = function() {
let ancestor = document.querySelector(".ancestor");
window.unused = ancestor.getBoundingClientRect();
ancestor.style.left = "100px";
}
</script>

View file

@ -142,3 +142,41 @@ test(function() {
assert_equals(computedStyle.transitionProperty, 'water');
}, "A var() cycle between a syntax:'*' property and an unregistered property is handled correctly.");
</script>
<style>
#test5_parent {
--registered-5-c:foo;
--registered-5-d:bar;
--registered-5-e:baz;
color: green;
}
#test5 {
--registered-5-a:var(--registered-5-b,hello);
--registered-5-b:var(--registered-5-a,world);
--registered-5-c:var(--registered-5-a);
--registered-5-d:var(--registered-5-b);
--registered-5-e:var(--unknown);
color: var(--registered-5-e);
}
</style>
<div id=test5_parent>
<div id=test5></div>
</div>
<script>
test(function() {
CSS.registerProperty({name: '--registered-5-a', syntax: '*', inherits: true});
CSS.registerProperty({name: '--registered-5-b', syntax: '*', inherits: true});
CSS.registerProperty({name: '--registered-5-c', syntax: '*', inherits: true});
CSS.registerProperty({name: '--registered-5-d', syntax: '*', inherits: true});
CSS.registerProperty({name: '--registered-5-e', syntax: '*', inherits: true});
let computedStyle = getComputedStyle(test5);
assert_equals(computedStyle.getPropertyValue('--registered-5-a'), '');
assert_equals(computedStyle.getPropertyValue('--registered-5-b'), '');
assert_equals(computedStyle.getPropertyValue('--registered-5-c'), 'foo');
assert_equals(computedStyle.getPropertyValue('--registered-5-d'), 'bar');
assert_equals(computedStyle.getPropertyValue('--registered-5-e'), 'baz');
assert_equals(computedStyle.getPropertyValue('color'), 'rgb(0, 128, 0)');
}, "Invalid at computed-value time triggers 'unset' behavior");
</script>

View file

@ -0,0 +1,71 @@
<!DOCTYPE html>
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<link rel="author" title="Emilio Cobos Álvarez" href="mailto:emilio@crisal.io">
<link rel="author" title="Mozilla" href="https://mozilla.org">
<link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1568778">
<link rel="help" href="https://drafts.csswg.org/css-scroll-anchoring/#suppression-triggers">
<style>
#hidden {
display: none;
background: red;
}
#spacer {
height: calc(100vh + 200px); /* At least 200px of scroll range */
}
</style>
<table>
<thead>
<tr>
<th>1
<th>1
<th>1
<th>1
</tr>
</thead>
<thead id="hidden">
<tr>
<th>1
<th>1
<th>1
<th>1
</tr>
</thead>
<tbody>
<tr><td>0 <td>0 <td>0 <td>0 </tr>
<tr><td>0 <td>0 <td>0 <td>0 </tr>
<tr><td>0 <td>0 <td>0 <td>0 </tr>
<tr><td>0 <td>0 <td>0 <td>0 </tr>
<tr><td>0 <td>0 <td>0 <td>0 </tr>
<tr><td>0 <td>0 <td>0 <td>0 </tr>
<tr><td>0 <td>0 <td>0 <td>0 </tr>
</tbody>
</table>
<div id="spacer"></div>
<script>
let isFirstEvent = true;
const targetScrollPosition = 100;
const hidden = document.querySelector("#hidden");
const t = async_test("Scroll offset doesn't get stuck in infinite scroll events when an element goes back and forth to display: none while changing abspos style");
window.onscroll = t.step_func(function() {
hidden.style.display = "block";
hidden.style.position = "absolute";
hidden.style.visibility = "hidden";
window.unused = hidden.offsetHeight;
hidden.style.display = "";
hidden.style.position = "";
hidden.style.visibility = "";
assert_true(isFirstEvent, "Shouldn't get more than one scroll event");
isFirstEvent = false;
requestAnimationFrame(t.step_func(function() {
requestAnimationFrame(t.step_func_done(function() {
assert_equals(document.scrollingElement.scrollTop, targetScrollPosition);
}));
}));
});
window.onload = t.step_func(function() {
window.scrollTo(0, targetScrollPosition);
});
</script>

View file

@ -0,0 +1,57 @@
<!doctype html>
<link rel="help" href="https://drafts.css-houdini.org/css-typed-om-1/#get-a-value-from-a-stylepropertymap">
<link rel="help" href="https://drafts.csswg.org/css-sizing-3/#valdef-width-auto">
<meta name="assert" content="Tests computed StylePropertyMap.get of auto minimum sizes." />
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="../../resources/testhelper.js"></script>
<div style="display: flex;">
<div id="flex-inflow"></div>
<div id="flex-absolute" style="position: absolute;"></div>
</div>
<div style="display: grid;">
<div id="grid-inflow"></div>
<div id="grid-absolute" style="position: absolute;"></div>
</div>
<div id="block-inflow"></div>
<div id="block-absolute" style="position: absolute;"></div>
<script>
'use strict';
test(t => {
const targetMap = document.getElementById('flex-inflow').computedStyleMap();
assert_style_value_equals(targetMap.get('min-width'), new CSSKeywordValue('auto'));
assert_style_value_equals(targetMap.get('min-height'), new CSSKeywordValue('auto'));
}, 'An inflow flex-item computed StylePropertyMap.get reports the auto minimum size correctly.');
test(t => {
const targetMap = document.getElementById('flex-absolute').computedStyleMap();
assert_style_value_equals(targetMap.get('min-width'), new CSSKeywordValue('auto'));
assert_style_value_equals(targetMap.get('min-height'), new CSSKeywordValue('auto'));
}, 'An absolute flex-child computed StylePropertyMap.get reports the auto minimum size correctly.');
test(t => {
const targetMap = document.getElementById('grid-inflow').computedStyleMap();
assert_style_value_equals(targetMap.get('min-width'), new CSSKeywordValue('auto'));
assert_style_value_equals(targetMap.get('min-height'), new CSSKeywordValue('auto'));
}, 'An inflow grid-item computed StylePropertyMap.get reports the auto minimum size correctly.');
test(t => {
const targetMap = document.getElementById('grid-absolute').computedStyleMap();
assert_style_value_equals(targetMap.get('min-width'), new CSSKeywordValue('auto'));
assert_style_value_equals(targetMap.get('min-height'), new CSSKeywordValue('auto'));
}, 'An absolute grid-child computed StylePropertyMap.get reports the auto minimum size correctly.');
test(t => {
const targetMap = document.getElementById('block-inflow').computedStyleMap();
assert_style_value_equals(targetMap.get('min-width'), new CSSKeywordValue('auto'));
assert_style_value_equals(targetMap.get('min-height'), new CSSKeywordValue('auto'));
}, 'An inflow block computed StylePropertyMap.get reports the auto minimum size correctly.');
test(t => {
const targetMap = document.getElementById('block-absolute').computedStyleMap();
assert_style_value_equals(targetMap.get('min-width'), new CSSKeywordValue('auto'));
assert_style_value_equals(targetMap.get('min-height'), new CSSKeywordValue('auto'));
}, 'An absolute block computed StylePropertyMap.get reports the auto minimum size correctly.');
</script>

Binary file not shown.

After

Width:  |  Height:  |  Size: 3.9 KiB

View file

@ -1,37 +0,0 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>CSS Reftest Reference</title>
<link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
<meta content="image" name="flags" />
<style type="text/css"><![CDATA[
img
{
vertical-align: top;
}
img + img
{
padding-left: 1em;
}
]]></style>
</head>
<body>
<div><img src="support/swatch-orange.png" width="100" height="100" alt="Image download support must be enabled" /><img src="support/wm-propagation-body-003-exp-res.png" width="340" height="37" alt="Image download support must be enabled" /></div>
<!--
The image says:
Test passes if there is an orange square
in the <strong>upper-left corner</strong> of the page.
-->
</body>
</html>

View file

@ -1,51 +0,0 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>CSS Writing Modes Test: 'writing-mode: vertical-rl' set to body element propagates to viewport</title>
<link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
<link rel="help" href="https://www.w3.org/TR/css-writing-modes-3/#principal-flow" title="8. The Principal Writing Mode" />
<link rel="bookmark" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1102175" title="Bug 1102175: &lt;body&gt; with writing-mode: vertical-rl does not align children to the right " />
<link rel="match" href="block-flow-direction-025-ref.xht" />
<meta name="flags" content="image" />
<meta name="assert" content="This test checks that when the root element has a &lt;body&gt; child element, then the principal writing mode is instead taken from the values of writing-mode and direction on the first such child element instead of taken from the root element." />
<style type="text/css"><![CDATA[
html
{
writing-mode: horizontal-tb;
}
body
{
writing-mode: vertical-rl;
}
div
{
background-color: blue;
height: 100px;
width: 100px;
}
]]></style>
</head>
<body>
<div></div>
<p><img src="support/block-flow-direction-025-exp-res.png" width="359" height="36" alt="Image download support must be enabled" /></p>
<!--
The image says:
Test passes if there is a blue square in the
<strong>upper-right corner</strong> of the page.
-->
</body>
</html>

View file

@ -1,49 +0,0 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>CSS Writing Modes Test: 'writing-mode: sideways-rl' set to body element propagates to viewport</title>
<link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
<link rel="help" href="https://www.w3.org/TR/css-writing-modes-4/#principal-flow" title="8. The Principal Writing Mode" />
<link rel="match" href="block-flow-direction-025-ref.xht" />
<meta name="flags" content="image" />
<meta name="assert" content="This test checks that when the root element has a &lt;body&gt; child element, then the principal writing mode is instead taken from the values of writing-mode and direction on the first such child element instead of taken from the root element." />
<style type="text/css"><![CDATA[
html
{
writing-mode: horizontal-tb;
}
body
{
writing-mode: sideways-rl;
}
div
{
background-color: blue;
height: 100px;
width: 100px;
}
]]></style>
</head>
<body>
<div></div>
<p><img src="support/block-flow-direction-025-exp-res.png" width="359" height="36" alt="Image download support must be enabled" /></p>
<!--
The image says:
Test passes if there is a blue square in the
<strong>upper-right corner</strong> of the page.
-->
</body>
</html>

View file

@ -1,48 +0,0 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>CSS Writing Modes Test: 'writing-mode: horizontal-tb' set to body element propagates to viewport</title>
<link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
<link rel="help" href="https://www.w3.org/TR/css-writing-modes-3/#principal-flow" title="8. The Principal Writing Mode" />
<link rel="match" href="wm-propagation-body-003-ref.xht" />
<meta name="flags" content="image" />
<meta name="assert" content="This test checks that when the root element has a &lt;body&gt; child element, then the principal writing mode is instead taken from the values of writing-mode and direction on the first such child element instead of taken from the root element." />
<style type="text/css"><![CDATA[
html
{
writing-mode: vertical-rl;
}
body
{
writing-mode: horizontal-tb;
}
img#orange-square
{
height: 100px;
padding-right: 1em;
vertical-align: top;
width: 100px;
}
]]></style>
</head>
<body>
<div><img id="orange-square" src="support/swatch-orange.png" alt="Image download support must be enabled" /><img src="support/wm-propagation-body-003-exp-res.png" width="340" height="37" alt="Image download support must be enabled" /></div>
<!--
The image says:
Test passes if there is an orange square
in the <strong>upper-left corner</strong> of the page.
-->
</body>
</html>

View file

@ -1,49 +0,0 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>CSS Writing Modes Test: 'writing-mode: vertical-lr' set to body element propagates to viewport</title>
<link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
<link rel="help" href="https://www.w3.org/TR/css-writing-modes-3/#principal-flow" title="8. The Principal Writing Mode" />
<link rel="match" href="wm-propagation-body-003-ref.xht" />
<meta name="flags" content="image" />
<meta name="assert" content="This test checks that when the root element has a &lt;body&gt; child element, then the principal writing mode is instead taken from the values of writing-mode and direction on the first such child element instead of taken from the root element." />
<style type="text/css"><![CDATA[
html
{
writing-mode: vertical-rl;
}
body
{
writing-mode: vertical-lr;
}
div
{
background-color: orange;
height: 100px;
width: 100px;
}
]]></style>
</head>
<body>
<div></div>
<p><img src="support/wm-propagation-body-003-exp-res.png" width="340" height="37" alt="Image download support must be enabled" /></p>
<!--
The image says:
Test passes if there is an orange square
in the <strong>upper-left corner</strong> of the page.
-->
</body>
</html>

View file

@ -1,50 +0,0 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>CSS Writing Modes Test: 'writing-mode: vertical-rl' set to body element propagates to viewport</title>
<link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
<link rel="help" href="https://www.w3.org/TR/css-writing-modes-3/#principal-flow" title="8. The Principal Writing Mode" />
<link rel="match" href="block-flow-direction-025-ref.xht" />
<meta name="flags" content="image" />
<meta name="assert" content="This test checks that when the root element has a &lt;body&gt; child element, then the principal writing mode is instead taken from the values of writing-mode and direction on the first such child element instead of taken from the root element." />
<style type="text/css"><![CDATA[
html
{
writing-mode: vertical-lr;
}
body
{
writing-mode: vertical-rl;
}
div
{
background-color: blue;
height: 100px;
width: 100px;
}
]]></style>
</head>
<body>
<div></div>
<p><img src="support/block-flow-direction-025-exp-res.png" width="359" height="36" alt="Image download support must be enabled" /></p>
<!--
The image says:
Test passes if there is a blue square in the
<strong>upper-right corner</strong> of the page.
-->
</body>
</html>

View file

@ -0,0 +1,81 @@
<!DOCTYPE html>
<meta charset="UTF-8">
<title>CSS Writing Modes Test: 'writing-mode: vertical-rl' set to &lt;body&gt; element propagates to viewport</title>
<link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/">
<link rel="help" href="https://www.w3.org/TR/css-writing-modes-3/#principal-flow" title="8. The Principal Writing Mode">
<!--
Issue 3066: [css-writing-modes] Does vertical writing mode of an HTML body
element cause an orthogonal flow?
https://github.com/w3c/csswg-drafts/issues/3066
-->
<link rel="match" href="block-flow-direction-025-ref.xht">
<meta name="flags" content="">
<meta name="assert" content="This test checks that when the root element has a &lt;body&gt; child element, then the principal writing mode is instead taken from the values of writing-mode and direction on the first such child element instead of taken from the root element. Also, a small script in this test verifies that the computed value of 'writing-mode' of the root element itself is not affected by such propagation.">
<!--
Tests 032 to 035: html's writing-mode is not specified
Tests 036 to 039: html's writing-mode is specified as horizontal-tb
Tests 040 to 043: html's writing-mode is specified as vertical-rl
Tests 044 to 047: html's writing-mode is specified as vertical-lr
Tests 048 to 051: html's writing-mode is specified as sideways-rl
Tests 052 to 055: html's writing-mode is specified as sideways-lr
-->
<style>
body
{
writing-mode: vertical-rl;
}
div
{
background-color: blue;
height: 100px;
width: 100px;
}
h1#second-test-condition
{
background-color: red;
color: yellow;
}
</style>
<script>
function verifyComputedValueDocRoot()
{
if(getComputedStyle(document.documentElement)["writing-mode"] == "horizontal-tb")
{
document.getElementById("second-test-condition").style.display = "none";
};
/*
If the computed value of 'writing-mode' of the root element
itself is not affected by such propagation, then the big FAIL
word will not be displayed.
*/
}
</script>
<body onload="verifyComputedValueDocRoot();">
<div></div>
<p><img src="support/block-flow-direction-025-exp-res.png" width="359" height="36" alt="Image download support must be enabled">
<!--
The image says:
Test passes if there is a blue square in the
<strong>upper-right corner</strong> of the page.
-->
<h1 id="second-test-condition">FAIL</h1>

View file

@ -0,0 +1,27 @@
<!DOCTYPE html>
<meta charset="UTF-8">
<title>CSS Reftest Reference</title>
<link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/">
<style>
img
{
vertical-align: top;
}
img + img
{
padding-left: 1em;
}
</style>
<div><img src="support/swatch-orange.png" width="100" height="100" alt="Image download support must be enabled"><img src="support/wm-propagation-body-003-exp-res.png" width="340" height="37" alt="Image download support must be enabled"></div>
<!--
The image says:
Test passes if there is an orange square
in the <strong>upper-left corner</strong> of the page.
-->

View file

@ -0,0 +1,84 @@
<!DOCTYPE html>
<meta charset="UTF-8">
<title>CSS Writing Modes Test: 'writing-mode: vertical-lr' set to &lt;body&gt; element propagates to viewport</title>
<link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/">
<link rel="help" href="https://www.w3.org/TR/css-writing-modes-3/#principal-flow" title="8. The Principal Writing Mode">
<!--
Issue 3066: [css-writing-modes] Does vertical writing mode of an HTML body
element cause an orthogonal flow?
https://github.com/w3c/csswg-drafts/issues/3066
-->
<link rel="match" href="wm-propagation-body-033-ref.html">
<meta name="flags" content="">
<meta name="assert" content="This test checks that when the root element has a &lt;body&gt; child element, then the principal writing mode is instead taken from the values of writing-mode and direction on the first such child element instead of taken from the root element. Also, a small script in this test verifies that the computed value of 'writing-mode' of the root element itself is not affected by such propagation.">
<!--
Tests 032 to 035: html's writing-mode is not specified
Tests 036 to 039: html's writing-mode is specified as horizontal-tb
Tests 040 to 043: html's writing-mode is specified as vertical-rl
Tests 044 to 047: html's writing-mode is specified as vertical-lr
Tests 048 to 051: html's writing-mode is specified as sideways-rl
Tests 052 to 055: html's writing-mode is specified as sideways-lr
-->
<style>
html::before
{
background-color: orange;
content: "";
display: block;
height: 100px;
margin-left: 8px;
margin-top: 8px;
margin-right: 1em;
width: 100px;
}
body
{
writing-mode: vertical-lr;
}
h1#second-test-condition
{
background-color: red;
color: yellow;
}
</style>
<script>
function verifyComputedValueDocRoot()
{
if(getComputedStyle(document.documentElement)["writing-mode"] == "horizontal-tb")
{
document.getElementById("second-test-condition").style.display = "none";
};
/*
If the computed value of 'writing-mode' of the root element
itself is not affected by such propagation, then the big FAIL
word will not be displayed.
*/
}
</script>
<body onload="verifyComputedValueDocRoot();">
<div><img src="support/wm-propagation-body-003-exp-res.png" width="340" height="37" alt="Image download support must be enabled"></div>
<!--
The image says:
Test passes if there is an orange square
in the <strong>upper-left corner</strong> of the page.
-->
<h1 id="second-test-condition">FAIL</h1>

View file

@ -0,0 +1,81 @@
<!DOCTYPE html>
<meta charset="UTF-8">
<title>CSS Writing Modes Test: 'writing-mode: sideways-rl' set to &lt;body&gt; element propagates to viewport</title>
<link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/">
<link rel="help" href="https://www.w3.org/TR/css-writing-modes-4/#principal-flow" title="8. The Principal Writing Mode">
<!--
Issue 3066: [css-writing-modes] Does vertical writing mode of an HTML body
element cause an orthogonal flow?
https://github.com/w3c/csswg-drafts/issues/3066
-->
<link rel="match" href="block-flow-direction-025-ref.xht">
<meta name="flags" content="">
<meta name="assert" content="This test checks that when the root element has a &lt;body&gt; child element, then the principal writing mode is instead taken from the values of writing-mode and direction on the first such child element instead of taken from the root element. Also, a small script in this test verifies that the computed value of 'writing-mode' of the root element itself is not affected by such propagation.">
<!--
Tests 032 to 035: html's writing-mode is not specified
Tests 036 to 039: html's writing-mode is specified as horizontal-tb
Tests 040 to 043: html's writing-mode is specified as vertical-rl
Tests 044 to 047: html's writing-mode is specified as vertical-lr
Tests 048 to 051: html's writing-mode is specified as sideways-rl
Tests 052 to 055: html's writing-mode is specified as sideways-lr
-->
<style>
body
{
writing-mode: sideways-rl;
}
div
{
background-color: blue;
height: 100px;
width: 100px;
}
h1#second-test-condition
{
background-color: red;
color: yellow;
}
</style>
<script>
function verifyComputedValueDocRoot()
{
if(getComputedStyle(document.documentElement)["writing-mode"] == "horizontal-tb")
{
document.getElementById("second-test-condition").style.display = "none";
};
/*
If the computed value of 'writing-mode' of the root element
itself is not affected by such propagation, then the big FAIL
word will not be displayed.
*/
}
</script>
<body onload="verifyComputedValueDocRoot();">
<div></div>
<p><img src="support/block-flow-direction-025-exp-res.png" width="359" height="36" alt="Image download support must be enabled">
<!--
The image says:
Test passes if there is a blue square in the
<strong>upper-right corner</strong> of the page.
-->
<h1 id="second-test-condition">FAIL</h1>

View file

@ -0,0 +1,34 @@
<!DOCTYPE html>
<meta charset="UTF-8">
<title>CSS Reftest Reference</title>
<link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/">
<style>
div
{
bottom: 8px;
left: auto;
position: absolute;
}
img
{
vertical-align: bottom;
}
img + img
{
padding-left: 1em;
}
</style>
<div><img src="support/swatch-teal.png" width="100" height="100" alt="Image download support must be enabled"><img src="support/wm-propagation-body-035-exp-res.png" width="322" height="38" alt="Image download support must be enabled"></div>
<!--
The image says:
Test passes if there is a teal square in
the <strong>lower-left corner</strong> of the page.
-->

View file

@ -0,0 +1,81 @@
<!DOCTYPE html>
<meta charset="UTF-8">
<title>CSS Writing Modes Test: 'writing-mode: sideways-lr' set to &lt;body&gt; element propagates to viewport</title>
<link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/">
<link rel="help" href="https://www.w3.org/TR/css-writing-modes-4/#principal-flow" title="8. The Principal Writing Mode">
<!--
Issue 3066: [css-writing-modes] Does vertical writing mode of an HTML body
element cause an orthogonal flow?
https://github.com/w3c/csswg-drafts/issues/3066
-->
<link rel="match" href="wm-propagation-body-035-ref.html">
<meta name="flags" content="">
<meta name="assert" content="This test checks that when the root element has a &lt;body&gt; child element, then the principal writing mode is instead taken from the values of writing-mode and direction on the first such child element instead of taken from the root element. Also, a small script in this test verifies that the computed value of 'writing-mode' of the root element itself is not affected by such propagation.">
<!--
Tests 032 to 035: html's writing-mode is not specified
Tests 036 to 039: html's writing-mode is specified as horizontal-tb
Tests 040 to 043: html's writing-mode is specified as vertical-rl
Tests 044 to 047: html's writing-mode is specified as vertical-lr
Tests 048 to 051: html's writing-mode is specified as sideways-rl
Tests 052 to 055: html's writing-mode is specified as sideways-lr
-->
<style>
body
{
writing-mode: sideways-lr;
}
div
{
background-color: teal;
height: 100px;
width: 100px;
}
h1#second-test-condition
{
background-color: red;
color: yellow;
}
</style>
<script>
function verifyComputedValueDocRoot()
{
if(getComputedStyle(document.documentElement)["writing-mode"] == "horizontal-tb")
{
document.getElementById("second-test-condition").style.display = "none";
};
/*
If the computed value of 'writing-mode' of the root element
itself is not affected by such propagation, then the big FAIL
word will not be displayed.
*/
}
</script>
<body onload="verifyComputedValueDocRoot();">
<div></div>
<p><img src="support/wm-propagation-body-035-exp-res.png" width="322" height="38" alt="Image download support must be enabled">
<!--
The image says:
Test passes if there is a teal square in
the <strong>lower-left corner</strong> of the page.
-->
<h1 id="second-test-condition">FAIL</h1>

View file

@ -0,0 +1,87 @@
<!DOCTYPE html>
<meta charset="UTF-8">
<title>CSS Writing Modes Test: 'writing-mode: vertical-rl' set to &lt;body&gt; element propagates to viewport</title>
<link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/">
<link rel="help" href="https://www.w3.org/TR/css-writing-modes-3/#principal-flow" title="8. The Principal Writing Mode">
<!--
Issue 3066: [css-writing-modes] Does vertical writing mode of an HTML body
element cause an orthogonal flow?
https://github.com/w3c/csswg-drafts/issues/3066
-->
<link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1102175" title="Bug 1102175: &lt;body&gt; with writing-mode: vertical-rl does not align children to the right ">
<link rel="match" href="block-flow-direction-025-ref.xht">
<meta name="flags" content="">
<meta name="assert" content="This test checks that when the root element has a &lt;body&gt; child element, then the principal writing mode is instead taken from the values of writing-mode and direction on the first such child element instead of taken from the root element. Also, a small script in this test verifies that the computed value of 'writing-mode' of the root element itself is not affected by such propagation.">
<!--
Tests 032 to 035: html's writing-mode is not specified
Tests 036 to 039: html's writing-mode is specified as horizontal-tb
Tests 040 to 043: html's writing-mode is specified as vertical-rl
Tests 044 to 047: html's writing-mode is specified as vertical-lr
Tests 048 to 051: html's writing-mode is specified as sideways-rl
Tests 052 to 055: html's writing-mode is specified as sideways-lr
-->
<style>
html
{
writing-mode: horizontal-tb;
}
body
{
writing-mode: vertical-rl;
}
div
{
background-color: blue;
height: 100px;
width: 100px;
}
h1#second-test-condition
{
background-color: red;
color: yellow;
}
</style>
<script>
function verifyComputedValueDocRoot()
{
if(getComputedStyle(document.documentElement)["writing-mode"] == "horizontal-tb")
{
document.getElementById("second-test-condition").style.display = "none";
};
/*
If the computed value of 'writing-mode' of the root element
itself is not affected by such propagation, then the big FAIL
word will not be displayed.
*/
}
</script>
<body onload="verifyComputedValueDocRoot();">
<div></div>
<p><img src="support/block-flow-direction-025-exp-res.png" width="359" height="36" alt="Image download support must be enabled">
<!--
The image says:
Test passes if there is a blue square in the
<strong>upper-right corner</strong> of the page.
-->
<h1 id="second-test-condition">FAIL</h1>

View file

@ -0,0 +1,89 @@
<!DOCTYPE html>
<meta charset="UTF-8">
<title>CSS Writing Modes Test: 'writing-mode: vertical-lr' set to &lt;body&gt; element propagates to viewport</title>
<link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/">
<link rel="help" href="https://www.w3.org/TR/css-writing-modes-3/#principal-flow" title="8. The Principal Writing Mode">
<!--
Issue 3066: [css-writing-modes] Does vertical writing mode of an HTML body
element cause an orthogonal flow?
https://github.com/w3c/csswg-drafts/issues/3066
-->
<link rel="match" href="wm-propagation-body-033-ref.html">
<meta name="flags" content="">
<meta name="assert" content="This test checks that when the root element has a &lt;body&gt; child element, then the principal writing mode is instead taken from the values of writing-mode and direction on the first such child element instead of taken from the root element. Also, a small script in this test verifies that the computed value of 'writing-mode' of the root element itself is not affected by such propagation.">
<!--
Tests 032 to 035: html's writing-mode is not specified
Tests 036 to 039: html's writing-mode is specified as horizontal-tb
Tests 040 to 043: html's writing-mode is specified as vertical-rl
Tests 044 to 047: html's writing-mode is specified as vertical-lr
Tests 048 to 051: html's writing-mode is specified as sideways-rl
Tests 052 to 055: html's writing-mode is specified as sideways-lr
-->
<style>
html
{
writing-mode: horizontal-tb;
}
html::before
{
background-color: orange;
content: "";
display: block;
height: 100px;
margin-left: 8px;
margin-top: 8px;
margin-right: 1em;
width: 100px;
}
body
{
writing-mode: vertical-lr;
}
h1#second-test-condition
{
background-color: red;
color: yellow;
}
</style>
<script>
function verifyComputedValueDocRoot()
{
if(getComputedStyle(document.documentElement)["writing-mode"] == "horizontal-tb")
{
document.getElementById("second-test-condition").style.display = "none";
};
/*
If the computed value of 'writing-mode' of the root element
itself is not affected by such propagation, then the big FAIL
word will not be displayed.
*/
}
</script>
<body onload="verifyComputedValueDocRoot();">
<div><img src="support/wm-propagation-body-003-exp-res.png" width="340" height="37" alt="Image download support must be enabled"></div>
<!--
The image says:
Test passes if there is an orange square
in the <strong>upper-left corner</strong> of the page.
-->
<h1 id="second-test-condition">FAIL</h1>

View file

@ -0,0 +1,86 @@
<!DOCTYPE html>
<meta charset="UTF-8">
<title>CSS Writing Modes Test: 'writing-mode: sideways-rl' set to &lt;body&gt; element propagates to viewport</title>
<link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/">
<link rel="help" href="https://www.w3.org/TR/css-writing-modes-4/#principal-flow" title="8. The Principal Writing Mode">
<!--
Issue 3066: [css-writing-modes] Does vertical writing mode of an HTML body
element cause an orthogonal flow?
https://github.com/w3c/csswg-drafts/issues/3066
-->
<link rel="match" href="block-flow-direction-025-ref.xht">
<meta name="flags" content="">
<meta name="assert" content="This test checks that when the root element has a &lt;body&gt; child element, then the principal writing mode is instead taken from the values of writing-mode and direction on the first such child element instead of taken from the root element. Also, a small script in this test verifies that the computed value of 'writing-mode' of the root element itself is not affected by such propagation.">
<!--
Tests 032 to 035: html's writing-mode is not specified
Tests 036 to 039: html's writing-mode is specified as horizontal-tb
Tests 040 to 043: html's writing-mode is specified as vertical-rl
Tests 044 to 047: html's writing-mode is specified as vertical-lr
Tests 048 to 051: html's writing-mode is specified as sideways-rl
Tests 052 to 055: html's writing-mode is specified as sideways-lr
-->
<style>
html
{
writing-mode: horizontal-tb;
}
body
{
writing-mode: sideways-rl;
}
div
{
background-color: blue;
height: 100px;
width: 100px;
}
h1#second-test-condition
{
background-color: red;
color: yellow;
}
</style>
<script>
function verifyComputedValueDocRoot()
{
if(getComputedStyle(document.documentElement)["writing-mode"] == "horizontal-tb")
{
document.getElementById("second-test-condition").style.display = "none";
};
/*
If the computed value of 'writing-mode' of the root element
itself is not affected by such propagation, then the big FAIL
word will not be displayed.
*/
}
</script>
<body onload="verifyComputedValueDocRoot();">
<div></div>
<p><img src="support/block-flow-direction-025-exp-res.png" width="359" height="36" alt="Image download support must be enabled">
<!--
The image says:
Test passes if there is a blue square in the
<strong>upper-right corner</strong> of the page.
-->
<h1 id="second-test-condition">FAIL</h1>

View file

@ -0,0 +1,86 @@
<!DOCTYPE html>
<meta charset="UTF-8">
<title>CSS Writing Modes Test: 'writing-mode: sideways-lr' set to &lt;body&gt; element propagates to viewport</title>
<link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/">
<link rel="help" href="https://www.w3.org/TR/css-writing-modes-4/#principal-flow" title="8. The Principal Writing Mode">
<!--
Issue 3066: [css-writing-modes] Does vertical writing mode of an HTML body
element cause an orthogonal flow?
https://github.com/w3c/csswg-drafts/issues/3066
-->
<link rel="match" href="wm-propagation-body-035-ref.html">
<meta name="flags" content="">
<meta name="assert" content="This test checks that when the root element has a &lt;body&gt; child element, then the principal writing mode is instead taken from the values of writing-mode and direction on the first such child element instead of taken from the root element. Also, a small script in this test verifies that the computed value of 'writing-mode' of the root element itself is not affected by such propagation.">
<!--
Tests 032 to 035: html's writing-mode is not specified
Tests 036 to 039: html's writing-mode is specified as horizontal-tb
Tests 040 to 043: html's writing-mode is specified as vertical-rl
Tests 044 to 047: html's writing-mode is specified as vertical-lr
Tests 048 to 051: html's writing-mode is specified as sideways-rl
Tests 052 to 055: html's writing-mode is specified as sideways-lr
-->
<style>
html
{
writing-mode: horizontal-tb;
}
body
{
writing-mode: sideways-lr;
}
div
{
background-color: teal;
height: 100px;
width: 100px;
}
h1#second-test-condition
{
background-color: red;
color: yellow;
}
</style>
<script>
function verifyComputedValueDocRoot()
{
if(getComputedStyle(document.documentElement)["writing-mode"] == "horizontal-tb")
{
document.getElementById("second-test-condition").style.display = "none";
};
/*
If the computed value of 'writing-mode' of the root element
itself is not affected by such propagation, then the big FAIL
word will not be displayed.
*/
}
</script>
<body onload="verifyComputedValueDocRoot();">
<div></div>
<p><img src="support/wm-propagation-body-035-exp-res.png" width="322" height="38" alt="Image download support must be enabled">
<!--
The image says:
Test passes if there is a teal square in
the <strong>lower-left corner</strong> of the page.
-->
<h1 id="second-test-condition">FAIL</h1>

View file

@ -0,0 +1,85 @@
<!DOCTYPE html>
<meta charset="UTF-8">
<title>CSS Writing Modes Test: 'writing-mode: horizontal-tb' set to &lt;body&gt; element propagates to viewport</title>
<link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/">
<link rel="help" href="https://www.w3.org/TR/css-writing-modes-3/#principal-flow" title="8. The Principal Writing Mode">
<!--
Issue 3066: [css-writing-modes] Does vertical writing mode of an HTML body
element cause an orthogonal flow?
https://github.com/w3c/csswg-drafts/issues/3066
-->
<link rel="match" href="wm-propagation-body-033-ref.html">
<meta name="flags" content="">
<meta name="assert" content="This test checks that when the root element has a &lt;body&gt; child element, then the principal writing mode is instead taken from the values of writing-mode and direction on the first such child element instead of taken from the root element. Also, a small script in this test verifies that the computed value of 'writing-mode' of the root element itself is not affected by such propagation.">
<!--
Tests 032 to 035: html's writing-mode is not specified
Tests 036 to 039: html's writing-mode is specified as horizontal-tb
Tests 040 to 043: html's writing-mode is specified as vertical-rl
Tests 044 to 047: html's writing-mode is specified as vertical-lr
Tests 048 to 051: html's writing-mode is specified as sideways-rl
Tests 052 to 055: html's writing-mode is specified as sideways-lr
-->
<style>
html
{
writing-mode: vertical-rl;
}
body
{
writing-mode: horizontal-tb;
}
img#orange-square
{
height: 100px;
padding-right: 1em;
vertical-align: top;
width: 100px;
}
h1#second-test-condition
{
background-color: red;
color: yellow;
}
</style>
<script>
function verifyComputedValueDocRoot()
{
if(getComputedStyle(document.documentElement)["writing-mode"] == "vertical-rl")
{
document.getElementById("second-test-condition").style.display = "none";
};
/*
If the computed value of 'writing-mode' of the root element
itself is not affected by such propagation, then the big FAIL
word will not be displayed.
*/
}
</script>
<body onload="verifyComputedValueDocRoot();">
<div><img id="orange-square" src="support/swatch-orange.png" alt="Image download support must be enabled"><img src="support/wm-propagation-body-003-exp-res.png" width="340" height="37" alt="Image download support must be enabled"></div>
<!--
The image says:
Test passes if there is an orange square
in the <strong>upper-left corner</strong> of the page.
-->
<h1 id="second-test-condition">FAIL</h1>

View file

@ -0,0 +1,86 @@
<!DOCTYPE html>
<meta charset="UTF-8">
<title>CSS Writing Modes Test: 'writing-mode: vertical-lr' set to &lt;body&gt; element propagates to viewport</title>
<link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/">
<link rel="help" href="https://www.w3.org/TR/css-writing-modes-3/#principal-flow" title="8. The Principal Writing Mode">
<!--
Issue 3066: [css-writing-modes] Does vertical writing mode of an HTML body
element cause an orthogonal flow?
https://github.com/w3c/csswg-drafts/issues/3066
-->
<link rel="match" href="wm-propagation-body-033-ref.html">
<meta name="flags" content="">
<meta name="assert" content="This test checks that when the root element has a &lt;body&gt; child element, then the principal writing mode is instead taken from the values of writing-mode and direction on the first such child element instead of taken from the root element. Also, a small script in this test verifies that the computed value of 'writing-mode' of the root element itself is not affected by such propagation.">
<!--
Tests 032 to 035: html's writing-mode is not specified
Tests 036 to 039: html's writing-mode is specified as horizontal-tb
Tests 040 to 043: html's writing-mode is specified as vertical-rl
Tests 044 to 047: html's writing-mode is specified as vertical-lr
Tests 048 to 051: html's writing-mode is specified as sideways-rl
Tests 052 to 055: html's writing-mode is specified as sideways-lr
-->
<style>
html
{
writing-mode: vertical-rl;
}
body
{
writing-mode: vertical-lr;
}
div
{
background-color: orange;
height: 100px;
width: 100px;
}
h1#second-test-condition
{
background-color: red;
color: yellow;
}
</style>
<script>
function verifyComputedValueDocRoot()
{
if(getComputedStyle(document.documentElement)["writing-mode"] == "vertical-rl")
{
document.getElementById("second-test-condition").style.display = "none";
};
/*
If the computed value of 'writing-mode' of the root element
itself is not affected by such propagation, then the big FAIL
word will not be displayed.
*/
}
</script>
<body onload="verifyComputedValueDocRoot();">
<div></div>
<p><img src="support/wm-propagation-body-003-exp-res.png" width="340" height="37" alt="Image download support must be enabled">
<!--
The image says:
Test passes if there is an orange square
in the <strong>upper-left corner</strong> of the page.
-->
<h1 id="second-test-condition">FAIL</h1>

View file

@ -0,0 +1,26 @@
<!DOCTYPE html>
<meta charset="UTF-8">
<title>CSS Reftest Reference</title>
<link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/">
<style>
html
{
writing-mode: vertical-rl;
}
</style>
<img id="blue" src="support/swatch-blue.png" width="100" height="100" alt="Image download support must be enabled">
<p><img src="support/block-flow-direction-025-exp-res.png" width="359" height="36" alt="Image download support must be enabled">
<!--
The image says:
Test passes if there is a blue square in the
<strong>upper-right corner</strong> of the page.
-->
<p style=margin-top:-8px>This text must be written sideways: vertically, with letters rotated 90 degrees.

View file

@ -0,0 +1,93 @@
<!DOCTYPE html>
<meta charset="UTF-8">
<title>CSS Writing Modes Test: 'writing-mode: sideways-rl' set to &lt;body&gt; element propagates to viewport</title>
<link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/">
<link rel="help" href="https://www.w3.org/TR/css-writing-modes-4/#principal-flow" title="8. The Principal Writing Mode">
<!--
Issue 3066: [css-writing-modes] Does vertical writing mode of an HTML body
element cause an orthogonal flow?
https://github.com/w3c/csswg-drafts/issues/3066
-->
<link rel="match" href="wm-propagation-body-042-ref.html">
<meta name="flags" content="">
<meta name="assert" content="This test checks that when the root element has a &lt;body&gt; child element, then the principal writing mode is instead taken from the values of writing-mode and direction on the first such child element instead of taken from the root element. Also, a small script in this test verifies that the computed value of 'writing-mode' of the root element itself is not affected by such propagation. Finally, in order to make sure that the principal writing mode is indeed 'sideways-rl', the test checks that a simple text is not affected by 'text-orientation: upright' since 'text-orientation: upright' should have no impact and no rendering effect on it.">
<!--
Tests 032 to 035: html's writing-mode is not specified
Tests 036 to 039: html's writing-mode is specified as horizontal-tb
Tests 040 to 043: html's writing-mode is specified as vertical-rl
Tests 044 to 047: html's writing-mode is specified as vertical-lr
Tests 048 to 051: html's writing-mode is specified as sideways-rl
Tests 052 to 055: html's writing-mode is specified as sideways-lr
-->
<style>
html
{
writing-mode: vertical-rl;
}
html::after
{
content: "This text must be written sideways: vertically, with letters rotated 90 degrees.";
text-orientation: upright;
/* 'text-orientation: upright' has no effect with 'sideways-rl', but does with 'vertical-rl' */
}
body
{
writing-mode: sideways-rl;
}
div
{
background-color: blue;
height: 100px;
width: 100px;
}
h1#second-test-condition
{
background-color: red;
color: yellow;
}
</style>
<script>
function verifyComputedValueDocRoot()
{
if(getComputedStyle(document.documentElement)["writing-mode"] == "vertical-rl")
{
document.getElementById("second-test-condition").style.display = "none";
};
/*
If the computed value of 'writing-mode' of the root element
itself is not affected by such propagation, then the big FAIL
word will not be displayed.
*/
}
</script>
<body onload="verifyComputedValueDocRoot();">
<div></div>
<p><img src="support/block-flow-direction-025-exp-res.png" width="359" height="36" alt="Image download support must be enabled">
<!--
The image says:
Test passes if there is a blue square in the
<strong>upper-right corner</strong> of the page.
-->
<h1 id="second-test-condition">FAIL</h1>

View file

@ -0,0 +1,86 @@
<!DOCTYPE html>
<meta charset="UTF-8">
<title>CSS Writing Modes Test: 'writing-mode: sideways-lr' set to &lt;body&gt; element propagates to viewport</title>
<link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/">
<link rel="help" href="https://www.w3.org/TR/css-writing-modes-4/#principal-flow" title="8. The Principal Writing Mode">
<!--
Issue 3066: [css-writing-modes] Does vertical writing mode of an HTML body
element cause an orthogonal flow?
https://github.com/w3c/csswg-drafts/issues/3066
-->
<link rel="match" href="wm-propagation-body-035-ref.html">
<meta name="flags" content="">
<meta name="assert" content="This test checks that when the root element has a &lt;body&gt; child element, then the principal writing mode is instead taken from the values of writing-mode and direction on the first such child element instead of taken from the root element. Also, a small script in this test verifies that the computed value of 'writing-mode' of the root element itself is not affected by such propagation.">
<!--
Tests 032 to 035: html's writing-mode is not specified
Tests 036 to 039: html's writing-mode is specified as horizontal-tb
Tests 040 to 043: html's writing-mode is specified as vertical-rl
Tests 044 to 047: html's writing-mode is specified as vertical-lr
Tests 048 to 051: html's writing-mode is specified as sideways-rl
Tests 052 to 055: html's writing-mode is specified as sideways-lr
-->
<style>
html
{
writing-mode: vertical-rl;
}
body
{
writing-mode: sideways-lr;
}
div
{
background-color: teal;
height: 100px;
width: 100px;
}
h1#second-test-condition
{
background-color: red;
color: yellow;
}
</style>
<script>
function verifyComputedValueDocRoot()
{
if(getComputedStyle(document.documentElement)["writing-mode"] == "vertical-rl")
{
document.getElementById("second-test-condition").style.display = "none";
};
/*
If the computed value of 'writing-mode' of the root element
itself is not affected by such propagation, then the big FAIL
word will not be displayed.
*/
}
</script>
<body onload="verifyComputedValueDocRoot();">
<div></div>
<p><img src="support/wm-propagation-body-035-exp-res.png" width="322" height="38" alt="Image download support must be enabled">
<!--
The image says:
Test passes if there is a teal square in
the <strong>lower-left corner</strong> of the page.
-->
<h1 id="second-test-condition">FAIL</h1>

View file

@ -0,0 +1,27 @@
<!DOCTYPE html>
<meta charset="UTF-8">
<title>CSS Reftest Reference</title>
<link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/">
<style>
img#orange-square
{
padding-right: 16px;
vertical-align: top;
}
</style>
<p><img id="orange-square" src="support/swatch-orange.png" width="100" height="100" alt="Image download support must be enabled"><img src="support/wm-propagation-body-003-exp-res.png" width="340" height="37" alt="Image download support must be enabled">
<!--
The image says:
Test passes if there is an orange square
in the <strong>upper-left corner</strong> of the page.
-->
<div style=margin-left:-8px>This text must be written horizontally.</div>

View file

@ -0,0 +1,91 @@
<!DOCTYPE html>
<meta charset="UTF-8">
<title>CSS Writing Modes Test: 'writing-mode: horizontal-tb' set to &lt;body&gt; element propagates to viewport</title>
<link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/">
<link rel="help" href="https://www.w3.org/TR/css-writing-modes-3/#principal-flow" title="8. The Principal Writing Mode">
<!--
Issue 3066: [css-writing-modes] Does vertical writing mode of an HTML body
element cause an orthogonal flow?
https://github.com/w3c/csswg-drafts/issues/3066
-->
<link rel="match" href="wm-propagation-body-044-ref.html">
<meta name="flags" content="">
<meta name="assert" content="This test checks that when the root element has a &lt;body&gt; child element, then the principal writing mode is instead taken from the values of writing-mode and direction on the first such child element instead of taken from the root element. Also, a small script in this test verifies that the computed value of 'writing-mode' of the root element itself is not affected by such propagation. Finally, in order to make sure that the principal writing mode is indeed 'horizontal-tb', the test checks that a generated text's inline axis is indeed horizontal and not vertical.">
<!--
Tests 032 to 035: html's writing-mode is not specified
Tests 036 to 039: html's writing-mode is specified as horizontal-tb
Tests 040 to 043: html's writing-mode is specified as vertical-rl
Tests 044 to 047: html's writing-mode is specified as vertical-lr
Tests 048 to 051: html's writing-mode is specified as sideways-rl
Tests 052 to 055: html's writing-mode is specified as sideways-lr
-->
<style>
html
{
writing-mode: vertical-lr;
}
html::after
{
content: "This text must be written horizontally.";
display: block;
}
body
{
writing-mode: horizontal-tb;
}
img#orange-square
{
height: 100px;
padding-right: 1em;
vertical-align: top;
width: 100px;
}
h1#second-test-condition
{
background-color: red;
color: yellow;
}
</style>
<script>
function verifyComputedValueDocRoot()
{
if(getComputedStyle(document.documentElement)["writing-mode"] == "vertical-lr")
{
document.getElementById("second-test-condition").style.display = "none";
};
/*
If the computed value of 'writing-mode' of the root element
itself is not affected by such propagation, then the big FAIL
word will not be displayed.
*/
}
</script>
<body onload="verifyComputedValueDocRoot();">
<p><img id="orange-square" src="support/swatch-orange.png" alt="Image download support must be enabled"><img src="support/wm-propagation-body-003-exp-res.png" width="340" height="37" alt="Image download support must be enabled"></p>
<!--
The image says:
Test passes if there is an orange square
in the <strong>upper-left corner</strong> of the page.
-->
<h1 id="second-test-condition">FAIL</h1>

View file

@ -0,0 +1,86 @@
<!DOCTYPE html>
<meta charset="UTF-8">
<title>CSS Writing Modes Test: 'writing-mode: vertical-rl' set to &lt;body&gt; element propagates to viewport</title>
<link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/">
<link rel="help" href="https://www.w3.org/TR/css-writing-modes-3/#principal-flow" title="8. The Principal Writing Mode">
<!--
Issue 3066: [css-writing-modes] Does vertical writing mode of an HTML body
element cause an orthogonal flow?
https://github.com/w3c/csswg-drafts/issues/3066
-->
<link rel="match" href="block-flow-direction-025-ref.xht">
<meta name="flags" content="">
<meta name="assert" content="This test checks that when the root element has a &lt;body&gt; child element, then the principal writing mode is instead taken from the values of writing-mode and direction on the first such child element instead of taken from the root element. Also, a small script in this test verifies that the computed value of 'writing-mode' of the root element itself is not affected by such propagation.">
<!--
Tests 032 to 035: html's writing-mode is not specified
Tests 036 to 039: html's writing-mode is specified as horizontal-tb
Tests 040 to 043: html's writing-mode is specified as vertical-rl
Tests 044 to 047: html's writing-mode is specified as vertical-lr
Tests 048 to 051: html's writing-mode is specified as sideways-rl
Tests 052 to 055: html's writing-mode is specified as sideways-lr
-->
<style>
html
{
writing-mode: vertical-lr;
}
body
{
writing-mode: vertical-rl;
}
div
{
background-color: blue;
height: 100px;
width: 100px;
}
h1#second-test-condition
{
background-color: red;
color: yellow;
}
</style>
<script>
function verifyComputedValueDocRoot()
{
if(getComputedStyle(document.documentElement)["writing-mode"] == "vertical-lr")
{
document.getElementById("second-test-condition").style.display = "none";
};
/*
If the computed value of 'writing-mode' of the root element
itself is not affected by such propagation, then the big FAIL
word will not be displayed.
*/
}
</script>
<body onload="verifyComputedValueDocRoot();">
<div></div>
<p><img src="support/block-flow-direction-025-exp-res.png" width="359" height="36" alt="Image download support must be enabled">
<!--
The image says:
Test passes if there is a blue square in the
<strong>upper-right corner</strong> of the page.
-->
<h1 id="second-test-condition">FAIL</h1>

View file

@ -0,0 +1,86 @@
<!DOCTYPE html>
<meta charset="UTF-8">
<title>CSS Writing Modes Test: 'writing-mode: sideways-rl' set to &lt;body&gt; element propagates to viewport</title>
<link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/">
<link rel="help" href="https://www.w3.org/TR/css-writing-modes-4/#principal-flow" title="8. The Principal Writing Mode">
<!--
Issue 3066: [css-writing-modes] Does vertical writing mode of an HTML body
element cause an orthogonal flow?
https://github.com/w3c/csswg-drafts/issues/3066
-->
<link rel="match" href="block-flow-direction-025-ref.xht">
<meta name="flags" content="">
<meta name="assert" content="This test checks that when the root element has a &lt;body&gt; child element, then the principal writing mode is instead taken from the values of writing-mode and direction on the first such child element instead of taken from the root element. Also, a small script in this test verifies that the computed value of 'writing-mode' of the root element itself is not affected by such propagation.">
<!--
Tests 032 to 035: html's writing-mode is not specified
Tests 036 to 039: html's writing-mode is specified as horizontal-tb
Tests 040 to 043: html's writing-mode is specified as vertical-rl
Tests 044 to 047: html's writing-mode is specified as vertical-lr
Tests 048 to 051: html's writing-mode is specified as sideways-rl
Tests 052 to 055: html's writing-mode is specified as sideways-lr
-->
<style>
html
{
writing-mode: vertical-lr;
}
body
{
writing-mode: sideways-rl;
}
div
{
background-color: blue;
height: 100px;
width: 100px;
}
h1#second-test-condition
{
background-color: red;
color: yellow;
}
</style>
<script>
function verifyComputedValueDocRoot()
{
if(getComputedStyle(document.documentElement)["writing-mode"] == "vertical-lr")
{
document.getElementById("second-test-condition").style.display = "none";
};
/*
If the computed value of 'writing-mode' of the root element
itself is not affected by such propagation, then the big FAIL
word will not be displayed.
*/
}
</script>
<body onload="verifyComputedValueDocRoot();">
<div></div>
<p><img src="support/block-flow-direction-025-exp-res.png" width="359" height="36" alt="Image download support must be enabled">
<!--
The image says:
Test passes if there is a blue square in the
<strong>upper-right corner</strong> of the page.
-->
<h1 id="second-test-condition">FAIL</h1>

View file

@ -0,0 +1,36 @@
<!DOCTYPE html>
<meta charset="UTF-8">
<title>CSS Reftest Reference</title>
<link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/">
<style>
html
{
writing-mode: sideways-lr;div
}
img
{
vertical-align: bottom;
}
div
{
margin-left: 1em;
margin-bottom: -8px;
}
</style>
<img src="support/swatch-teal.png" width="100" height="100" alt="Image download support must be enabled">
<p><img src="support/wm-propagation-body-035-exp-res.png" width="322" height="38" alt="Image download support must be enabled"></p>
<!--
The image says:
Test passes if there is a teal square in
the <strong>lower-left corner</strong> of the page.
-->
<div>This text must be written sideways: vertically, with letters rotated 90 degrees.</div>

View file

@ -0,0 +1,99 @@
<!DOCTYPE html>
<meta charset="UTF-8">
<title>CSS Writing Modes Test: 'writing-mode: sideways-lr' set to &lt;body&gt; element propagates to viewport</title>
<link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/">
<link rel="help" href="https://www.w3.org/TR/css-writing-modes-4/#principal-flow" title="8. The Principal Writing Mode">
<!--
Issue 3066: [css-writing-modes] Does vertical writing mode of an HTML body
element cause an orthogonal flow?
https://github.com/w3c/csswg-drafts/issues/3066
-->
<link rel="match" href="wm-propagation-body-047-ref.html">
<meta name="flags" content="">
<meta name="assert" content="This test checks that when the root element has a &lt;body&gt; child element, then the principal writing mode is instead taken from the values of writing-mode and direction on the first such child element instead of taken from the root element. Also, a small script in this test verifies that the computed value of 'writing-mode' of the root element itself is not affected by such propagation.">
<!--
Tests 032 to 035: html's writing-mode is not specified
Tests 036 to 039: html's writing-mode is specified as horizontal-tb
Tests 040 to 043: html's writing-mode is specified as vertical-rl
Tests 044 to 047: html's writing-mode is specified as vertical-lr
Tests 048 to 051: html's writing-mode is specified as sideways-rl
Tests 052 to 055: html's writing-mode is specified as sideways-lr
-->
<style>
html
{
writing-mode: vertical-lr;
}
body
{
writing-mode: sideways-lr;
}
html::after
{
content: "This text must be written sideways: vertically, with letters rotated 90 degrees.";
text-orientation: upright; /* this has no effect with sideways-rl, but does with vertical-rl*/
}
div
{
background-color: teal;
height: 100px;
width: 100px;
}
img
{
display: block;
margin-left: 1em;
margin-right: 1em;
}
h1#second-test-condition
{
background-color: red;
color: yellow;
}
</style>
<script>
function verifyComputedValueDocRoot()
{
if(getComputedStyle(document.documentElement)["writing-mode"] == "vertical-lr")
{
document.getElementById("second-test-condition").style.display = "none";
};
/*
If the computed value of 'writing-mode' of the root element
itself is not affected by such propagation, then the big FAIL
word will not be displayed.
*/
}
</script>
<body onload="verifyComputedValueDocRoot();">
<div></div>
<img src="support/wm-propagation-body-035-exp-res.png" width="322" height="38" alt="Image download support must be enabled">
<!--
The image says:
Test passes if there is a teal square in
the <strong>lower-left corner</strong> of the page.
-->
<h1 id="second-test-condition">FAIL</h1>

View file

@ -0,0 +1,85 @@
<!DOCTYPE html>
<meta charset="UTF-8">
<title>CSS Writing Modes Test: 'writing-mode: horizontal-tb' set to &lt;body&gt; element propagates to viewport</title>
<link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/">
<link rel="help" href="https://www.w3.org/TR/css-writing-modes-4/#principal-flow" title="8. The Principal Writing Mode">
<!--
Issue 3066: [css-writing-modes] Does vertical writing mode of an HTML body
element cause an orthogonal flow?
https://github.com/w3c/csswg-drafts/issues/3066
-->
<link rel="match" href="wm-propagation-body-033-ref.html">
<meta name="flags" content="">
<meta name="assert" content="This test checks that when the root element has a &lt;body&gt; child element, then the principal writing mode is instead taken from the values of writing-mode and direction on the first such child element instead of taken from the root element. Also, a small script in this test verifies that the computed value of 'writing-mode' of the root element itself is not affected by such propagation.">
<!--
Tests 032 to 035: html's writing-mode is not specified
Tests 036 to 039: html's writing-mode is specified as horizontal-tb
Tests 040 to 043: html's writing-mode is specified as vertical-rl
Tests 044 to 047: html's writing-mode is specified as vertical-lr
Tests 048 to 051: html's writing-mode is specified as sideways-rl
Tests 052 to 055: html's writing-mode is specified as sideways-lr
-->
<style>
html
{
writing-mode: sideways-rl;
}
body
{
writing-mode: horizontal-tb;
}
img#orange-square
{
height: 100px;
padding-right: 1em;
vertical-align: top;
width: 100px;
}
h1#second-test-condition
{
background-color: red;
color: yellow;
}
</style>
<script>
function verifyComputedValueDocRoot()
{
if(getComputedStyle(document.documentElement)["writing-mode"] == "sideways-rl")
{
document.getElementById("second-test-condition").style.display = "none";
};
/*
If the computed value of 'writing-mode' of the root element
itself is not affected by such propagation, then the big FAIL
word will not be displayed.
*/
}
</script>
<body onload="verifyComputedValueDocRoot();">
<div><img id="orange-square" src="support/swatch-orange.png" alt="Image download support must be enabled"><img src="support/wm-propagation-body-003-exp-res.png" width="340" height="37" alt="Image download support must be enabled"></div>
<!--
The image says:
Test passes if there is an orange square
in the <strong>upper-left corner</strong> of the page.
-->
<h1 id="second-test-condition">FAIL</h1>

View file

@ -0,0 +1,48 @@
<!DOCTYPE html>
<meta charset="UTF-8">
<title>CSS Reftest Reference</title>
<link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/">
<style>
html
{
writing-mode: vertical-rl;
}
body
{
margin: 0px;
}
p
{
text-orientation: upright;
}
img
{
padding-top: 8px;
}
img#blue
{
padding-left: 16px;
padding-right: 8px;
}
</style>
<img id="blue" src="support/swatch-blue.png" width="100" height="100" alt="Image download support must be enabled">
<div><img src="support/block-flow-direction-025-exp-res.png" width="359" height="36" alt="Image download support must be enabled"></div>
<!--
The image says:
Test passes if there is a blue square in the
<strong>upper-right corner</strong> of the page.
-->
<p>This text must be vertical, with letters upright.

View file

@ -0,0 +1,93 @@
<!DOCTYPE html>
<meta charset="UTF-8">
<title>CSS Writing Modes Test: 'writing-mode: vertical-rl' set to &lt;body&gt; element propagates to viewport</title>
<link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/">
<link rel="help" href="https://www.w3.org/TR/css-writing-modes-4/#principal-flow" title="8. The Principal Writing Mode">
<!--
Issue 3066: [css-writing-modes] Does vertical writing mode of an HTML body
element cause an orthogonal flow?
https://github.com/w3c/csswg-drafts/issues/3066
-->
<link rel="match" href="wm-propagation-body-049-ref.html">
<meta name="flags" content="">
<meta name="assert" content="This test checks that when the root element has a &lt;body&gt; child element, then the principal writing mode is instead taken from the values of writing-mode and direction on the first such child element instead of taken from the root element. Also, a small script in this test verifies that the computed value of 'writing-mode' of the root element itself is not affected by such propagation. Finally, in order to make sure that the principal writing mode is indeed 'vertical-rl', the test checks that a simple text is affected by 'text-orientation: upright' since 'text-orientation: upright' should have a rendering effect on it.">
<!--
Tests 032 to 035: html's writing-mode is not specified
Tests 036 to 039: html's writing-mode is specified as horizontal-tb
Tests 040 to 043: html's writing-mode is specified as vertical-rl
Tests 044 to 047: html's writing-mode is specified as vertical-lr
Tests 048 to 051: html's writing-mode is specified as sideways-rl
Tests 052 to 055: html's writing-mode is specified as sideways-lr
-->
<style>
html
{
writing-mode: sideways-rl;
}
html::after
{
content: "This text must be vertical, with letters upright.";
text-orientation: upright;
/* 'text-orientation: upright' has no effect with 'sideways-rl', but does with 'vertical-rl' */
}
body
{
writing-mode: vertical-rl;
}
div
{
background-color: blue;
height: 100px;
width: 100px;
}
h1#second-test-condition
{
background-color: red;
color: yellow;
}
</style>
<script>
function verifyComputedValueDocRoot()
{
if(getComputedStyle(document.documentElement)["writing-mode"] == "sideways-rl")
{
document.getElementById("second-test-condition").style.display = "none";
};
/*
If the computed value of 'writing-mode' of the root element
itself is not affected by such propagation, then the big FAIL
word will not be displayed.
*/
}
</script>
<body onload="verifyComputedValueDocRoot();">
<div></div>
<p><img src="support/block-flow-direction-025-exp-res.png" width="359" height="36" alt="Image download support must be enabled">
<!--
The image says:
Test passes if there is a blue square in the
<strong>upper-right corner</strong> of the page.
-->
<h1 id="second-test-condition">FAIL</h1>

View file

@ -0,0 +1,86 @@
<!DOCTYPE html>
<meta charset="UTF-8">
<title>CSS Writing Modes Test: 'writing-mode: vertical-lr' set to &lt;body&gt; element propagates to viewport</title>
<link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/">
<link rel="help" href="https://www.w3.org/TR/css-writing-modes-4/#principal-flow" title="8. The Principal Writing Mode">
<!--
Issue 3066: [css-writing-modes] Does vertical writing mode of an HTML body
element cause an orthogonal flow?
https://github.com/w3c/csswg-drafts/issues/3066
-->
<link rel="match" href="wm-propagation-body-033-ref.html">
<meta name="flags" content="">
<meta name="assert" content="This test checks that when the root element has a &lt;body&gt; child element, then the principal writing mode is instead taken from the values of writing-mode and direction on the first such child element instead of taken from the root element. Also, a small script in this test verifies that the computed value of 'writing-mode' of the root element itself is not affected by such propagation.">
<!--
Tests 032 to 035: html's writing-mode is not specified
Tests 036 to 039: html's writing-mode is specified as horizontal-tb
Tests 040 to 043: html's writing-mode is specified as vertical-rl
Tests 044 to 047: html's writing-mode is specified as vertical-lr
Tests 048 to 051: html's writing-mode is specified as sideways-rl
Tests 052 to 055: html's writing-mode is specified as sideways-lr
-->
<style>
html
{
writing-mode: sideways-rl;
}
body
{
writing-mode: vertical-lr;
}
div
{
background-color: orange;
height: 100px;
width: 100px;
}
h1#second-test-condition
{
background-color: red;
color: yellow;
}
</style>
<script>
function verifyComputedValueDocRoot()
{
if(getComputedStyle(document.documentElement)["writing-mode"] == "sideways-rl")
{
document.getElementById("second-test-condition").style.display = "none";
};
/*
If the computed value of 'writing-mode' of the root element
itself is not affected by such propagation, then the big FAIL
word will not be displayed.
*/
}
</script>
<body onload="verifyComputedValueDocRoot();">
<div></div>
<p><img src="support/wm-propagation-body-003-exp-res.png" width="340" height="37" alt="Image download support must be enabled">
<!--
The image says:
Test passes if there is an orange square
in the <strong>upper-left corner</strong> of the page.
-->
<h1 id="second-test-condition">FAIL</h1>

View file

@ -0,0 +1,86 @@
<!DOCTYPE html>
<meta charset="UTF-8">
<title>CSS Writing Modes Test: 'writing-mode: sideways-lr' set to &lt;body&gt; element propagates to viewport</title>
<link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/">
<link rel="help" href="https://www.w3.org/TR/css-writing-modes-4/#principal-flow" title="8. The Principal Writing Mode">
<!--
Issue 3066: [css-writing-modes] Does vertical writing mode of an HTML body
element cause an orthogonal flow?
https://github.com/w3c/csswg-drafts/issues/3066
-->
<link rel="match" href="wm-propagation-body-035-ref.html">
<meta name="flags" content="">
<meta name="assert" content="This test checks that when the root element has a &lt;body&gt; child element, then the principal writing mode is instead taken from the values of writing-mode and direction on the first such child element instead of taken from the root element. Also, a small script in this test verifies that the computed value of 'writing-mode' of the root element itself is not affected by such propagation.">
<!--
Tests 032 to 035: html's writing-mode is not specified
Tests 036 to 039: html's writing-mode is specified as horizontal-tb
Tests 040 to 043: html's writing-mode is specified as vertical-rl
Tests 044 to 047: html's writing-mode is specified as vertical-lr
Tests 048 to 051: html's writing-mode is specified as sideways-rl
Tests 052 to 055: html's writing-mode is specified as sideways-lr
-->
<style>
html
{
writing-mode: sideways-rl;
}
body
{
writing-mode: sideways-lr;
}
div
{
background-color: teal;
height: 100px;
width: 100px;
}
h1#second-test-condition
{
background-color: red;
color: yellow;
}
</style>
<script>
function verifyComputedValueDocRoot()
{
if(getComputedStyle(document.documentElement)["writing-mode"] == "sideways-rl")
{
document.getElementById("second-test-condition").style.display = "none";
};
/*
If the computed value of 'writing-mode' of the root element
itself is not affected by such propagation, then the big FAIL
word will not be displayed.
*/
}
</script>
<body onload="verifyComputedValueDocRoot();">
<div></div>
<p><img src="support/wm-propagation-body-035-exp-res.png" width="322" height="38" alt="Image download support must be enabled">
<!--
The image says:
Test passes if there is a teal square in
the <strong>lower-left corner</strong> of the page.
-->
<h1 id="second-test-condition">FAIL</h1>

View file

@ -0,0 +1,85 @@
<!DOCTYPE html>
<meta charset="UTF-8">
<title>CSS Writing Modes Test: 'writing-mode: horizontal-tb' set to &lt;body&gt; element propagates to viewport</title>
<link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/">
<link rel="help" href="https://www.w3.org/TR/css-writing-modes-4/#principal-flow" title="8. The Principal Writing Mode">
<!--
Issue 3066: [css-writing-modes] Does vertical writing mode of an HTML body
element cause an orthogonal flow?
https://github.com/w3c/csswg-drafts/issues/3066
-->
<link rel="match" href="wm-propagation-body-033-ref.html">
<meta name="flags" content="">
<meta name="assert" content="This test checks that when the root element has a &lt;body&gt; child element, then the principal writing mode is instead taken from the values of writing-mode and direction on the first such child element instead of taken from the root element. Also, a small script in this test verifies that the computed value of 'writing-mode' of the root element itself is not affected by such propagation.">
<!--
Tests 032 to 035: html's writing-mode is not specified
Tests 036 to 039: html's writing-mode is specified as horizontal-tb
Tests 040 to 043: html's writing-mode is specified as vertical-rl
Tests 044 to 047: html's writing-mode is specified as vertical-lr
Tests 048 to 051: html's writing-mode is specified as sideways-rl
Tests 052 to 055: html's writing-mode is specified as sideways-lr
-->
<style>
html
{
writing-mode: sideways-lr;
}
body
{
writing-mode: horizontal-tb;
}
img#orange-square
{
height: 100px;
padding-right: 1em;
vertical-align: top;
width: 100px;
}
h1#second-test-condition
{
background-color: red;
color: yellow;
}
</style>
<script>
function verifyComputedValueDocRoot()
{
if(getComputedStyle(document.documentElement)["writing-mode"] == "sideways-lr")
{
document.getElementById("second-test-condition").style.display = "none";
};
/*
If the computed value of 'writing-mode' of the root element
itself is not affected by such propagation, then the big FAIL
word will not be displayed.
*/
}
</script>
<body onload="verifyComputedValueDocRoot();">
<div><img id="orange-square" src="support/swatch-orange.png" alt="Image download support must be enabled"><img src="support/wm-propagation-body-003-exp-res.png" width="340" height="37" alt="Image download support must be enabled"></div>
<!--
The image says:
Test passes if there is an orange square
in the <strong>upper-left corner</strong> of the page.
-->
<h1 id="second-test-condition">FAIL</h1>

View file

@ -0,0 +1,86 @@
<!DOCTYPE html>
<meta charset="UTF-8">
<title>CSS Writing Modes Test: 'writing-mode: vertical-rl' set to &lt;body&gt; element propagates to viewport</title>
<link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/">
<link rel="help" href="https://www.w3.org/TR/css-writing-modes-4/#principal-flow" title="8. The Principal Writing Mode">
<!--
Issue 3066: [css-writing-modes] Does vertical writing mode of an HTML body
element cause an orthogonal flow?
https://github.com/w3c/csswg-drafts/issues/3066
-->
<link rel="match" href="block-flow-direction-025-ref.xht">
<meta name="flags" content="">
<meta name="assert" content="This test checks that when the root element has a &lt;body&gt; child element, then the principal writing mode is instead taken from the values of writing-mode and direction on the first such child element instead of taken from the root element. Also, a small script in this test verifies that the computed value of 'writing-mode' of the root element itself is not affected by such propagation.">
<!--
Tests 032 to 035: html's writing-mode is not specified
Tests 036 to 039: html's writing-mode is specified as horizontal-tb
Tests 040 to 043: html's writing-mode is specified as vertical-rl
Tests 044 to 047: html's writing-mode is specified as vertical-lr
Tests 048 to 051: html's writing-mode is specified as sideways-rl
Tests 052 to 055: html's writing-mode is specified as sideways-lr
-->
<style>
html
{
writing-mode: sideways-lr;
}
body
{
writing-mode: vertical-rl;
}
div
{
background-color: blue;
height: 100px;
width: 100px;
}
h1#second-test-condition
{
background-color: red;
color: yellow;
}
</style>
<script>
function verifyComputedValueDocRoot()
{
if(getComputedStyle(document.documentElement)["writing-mode"] == "sideways-lr")
{
document.getElementById("second-test-condition").style.display = "none";
};
/*
If the computed value of 'writing-mode' of the root element
itself is not affected by such propagation, then the big FAIL
word will not be displayed.
*/
}
</script>
<body onload="verifyComputedValueDocRoot();">
<div></div>
<p><img src="support/block-flow-direction-025-exp-res.png" width="359" height="36" alt="Image download support must be enabled">
<!--
The image says:
Test passes if there is a blue square in the
<strong>upper-right corner</strong> of the page.
-->
<h1 id="second-test-condition">FAIL</h1>

View file

@ -0,0 +1,32 @@
<!DOCTYPE html>
<meta charset="UTF-8">
<title>CSS Reftest Reference</title>
<link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/">
<style>
html
{
writing-mode: vertical-lr;
}
div
{
text-orientation: upright;
}
</style>
<img id="orange" src="support/swatch-orange.png" width="100" height="100" alt="Image download support must be enabled">
<p><img src="support/wm-propagation-body-003-exp-res.png" width="340" height="37" alt="Image download support must be enabled">
<!--
The image says:
Test passes if there is an orange square
in the <strong>upper-left corner</strong> of the page.
-->
<div>This text must be vertical, with letters upright.</div>

View file

@ -0,0 +1,94 @@
<!DOCTYPE html>
<meta charset="UTF-8">
<title>CSS Writing Modes Test: 'writing-mode: vertical-lr' set to &lt;body&gt; element propagates to viewport</title>
<link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/">
<link rel="help" href="https://www.w3.org/TR/css-writing-modes-4/#principal-flow" title="8. The Principal Writing Mode">
<!--
Issue 3066: [css-writing-modes] Does vertical writing mode of an HTML body
element cause an orthogonal flow?
https://github.com/w3c/csswg-drafts/issues/3066
-->
<link rel="match" href="wm-propagation-body-054-ref.html">
<meta name="flags" content="">
<meta name="assert" content="This test checks that when the root element has a &lt;body&gt; child element, then the principal writing mode is instead taken from the values of writing-mode and direction on the first such child element instead of taken from the root element. Also, a small script in this test verifies that the computed value of 'writing-mode' of the root element itself is not affected by such propagation. Finally, in order to make sure that the principal writing mode is indeed 'vertical-lr', the test checks that a simple text is affected by 'text-orientation: upright' since 'text-orientation: upright' should have a rendering effect on it.">
<!--
Tests 032 to 035: html's writing-mode is not specified
Tests 036 to 039: html's writing-mode is specified as horizontal-tb
Tests 040 to 043: html's writing-mode is specified as vertical-rl
Tests 044 to 047: html's writing-mode is specified as vertical-lr
Tests 048 to 051: html's writing-mode is specified as sideways-rl
Tests 052 to 055: html's writing-mode is specified as sideways-lr
-->
<style>
html
{
writing-mode: sideways-lr;
}
html::after
{
content: "This text must be vertical, with letters upright.";
text-orientation: upright;
/* 'text-orientation: upright' has no effect with 'sideways-lr', but does with 'vertical-lr' */
margin-top: 8px;
}
body
{
writing-mode: vertical-lr;
}
div
{
background-color: orange;
height: 100px;
width: 100px;
}
h1#second-test-condition
{
background-color: red;
color: yellow;
}
</style>
<script>
function verifyComputedValueDocRoot()
{
if(getComputedStyle(document.documentElement)["writing-mode"] == "sideways-lr")
{
document.getElementById("second-test-condition").style.display = "none";
};
/*
If the computed value of 'writing-mode' of the root element
itself is not affected by such propagation, then the big FAIL
word will not be displayed.
*/
}
</script>
<body onload="verifyComputedValueDocRoot();">
<div></div>
<p><img src="support/wm-propagation-body-003-exp-res.png" width="340" height="37" alt="Image download support must be enabled">
<!--
The image says:
Test passes if there is an orange square
in the <strong>upper-left corner</strong> of the page.
-->
<h1 id="second-test-condition">FAIL</h1>

View file

@ -0,0 +1,86 @@
<!DOCTYPE html>
<meta charset="UTF-8">
<title>CSS Writing Modes Test: 'writing-mode: sideways-rl' set to &lt;body&gt; element propagates to viewport</title>
<link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/">
<link rel="help" href="https://www.w3.org/TR/css-writing-modes-4/#principal-flow" title="8. The Principal Writing Mode">
<!--
Issue 3066: [css-writing-modes] Does vertical writing mode of an HTML body
element cause an orthogonal flow?
https://github.com/w3c/csswg-drafts/issues/3066
-->
<link rel="match" href="block-flow-direction-025-ref.xht">
<meta name="flags" content="">
<meta name="assert" content="This test checks that when the root element has a &lt;body&gt; child element, then the principal writing mode is instead taken from the values of writing-mode and direction on the first such child element instead of taken from the root element. Also, a small script in this test verifies that the computed value of 'writing-mode' of the root element itself is not affected by such propagation.">
<!--
Tests 032 to 035: html's writing-mode is not specified
Tests 036 to 039: html's writing-mode is specified as horizontal-tb
Tests 040 to 043: html's writing-mode is specified as vertical-rl
Tests 044 to 047: html's writing-mode is specified as vertical-lr
Tests 048 to 051: html's writing-mode is specified as sideways-rl
Tests 052 to 055: html's writing-mode is specified as sideways-lr
-->
<style>
html
{
writing-mode: sideways-lr;
}
body
{
writing-mode: sideways-rl;
}
div
{
background-color: blue;
height: 100px;
width: 100px;
}
h1#second-test-condition
{
background-color: red;
color: yellow;
}
</style>
<script>
function verifyComputedValueDocRoot()
{
if(getComputedStyle(document.documentElement)["writing-mode"] == "sideways-lr")
{
document.getElementById("second-test-condition").style.display = "none";
};
/*
If the computed value of 'writing-mode' of the root element
itself is not affected by such propagation, then the big FAIL
word will not be displayed.
*/
}
</script>
<body onload="verifyComputedValueDocRoot();">
<div></div>
<p><img src="support/block-flow-direction-025-exp-res.png" width="359" height="36" alt="Image download support must be enabled">
<!--
The image says:
Test passes if there is a blue square in the
<strong>upper-right corner</strong> of the page.
-->
<h1 id="second-test-condition">FAIL</h1>

View file

@ -0,0 +1,32 @@
<!DOCTYPE html>
<title>Test elementFromPoint for list-item</title>
<link rel="help" href="https://drafts.csswg.org/cssom-view/#dom-document-elementfrompoint">
<link rel="author" title="Koji Ishii" href="mailto:kojii@chromium.org">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<style>
ul.inside {
list-style-position: inside;
}
</style>
<body>
<ul>
<li>Outside 1</li>
<li>Outside 2</li>
<li>Outside 3</li>
</ul>
<ul class="inside">
<li>Inside 1</li>
<li>Inside 2</li>
<li>Inside 3</li>
</ul>
<script>
for (let li of document.getElementsByTagName('li')) {
test(() => {
let bounds = li.getBoundingClientRect();
let target = document.elementFromPoint(bounds.x + 1, bounds.y + 1);
assert_equals(target, li);
}, `<li>${li.textContent}</li>`);
}
</script>
</body>

View file

@ -0,0 +1,106 @@
<!DOCTYPE html>
<title>CSSOM View - scrollIntoView considers sideways-lr writing mode and rtl direction</title>
<meta charset="utf-8">
<link rel="author" title="Cathie Chen" href="mailto:cathiechen@igalia.com">
<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>
<style>
.box {
float: left;
width: 200px;
height: 200px;
}
#scroller {
writing-mode: sideways-lr;
direction: rtl;
overflow: scroll;
width: 300px;
height: 300px;
}
#container{
width: 600px;
height: 600px;
}
#target {
background-color: #ff0;
}
</style>
<body>
<div id="scroller">
<div id="container">
<!-- ROW-1 -->
<div class="row">
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
</div>
<!-- ROW-2 -->
<div class="row">
<div class="box"></div>
<div class="box" id="target"></div>
<div class="box"></div>
</div>
<!-- ROW-3 -->
<div class="row">
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
</div>
</div>
</div>
<script>
// In sideways-lr mode and rtl direction, X corresponds to the block axis and is oriented rightward.
// Y corresponds to the inline axis and is oriented downward.
// So the beginning edges are the top and left edges and the ending edges are the bottom and right edges.
// This assumes that the horizontal scrollbar is on the bottom side and the vertical scrollbar is on the right side.
var target = document.getElementById("target");
var scroller = document.getElementById("scroller");
var scrollbar_width = scroller.offsetWidth - scroller.clientWidth;
var scroller_width = scroller.offsetWidth;
var scroller_height = scroller.offsetHeight;
var box_width = target.offsetWidth;
var box_height = target.offsetHeight;
var expectedX = {
blockStart: box_width,
blockCenter: (3*box_width - scroller_width)/2 + scrollbar_width/2,
blockEnd: 2*box_width - scroller_width + scrollbar_width,
};
var expectedY = {
inlineStart: box_height,
inlineCenter: (3*box_height - scroller_height)/2 + scrollbar_width/2,
inlineEnd: 2*box_height - scroller_height + scrollbar_width,
};
[
[{block: "start", inline: "start"}, expectedX.blockStart, expectedY.inlineStart],
[{block: "start", inline: "center"}, expectedX.blockStart, expectedY.inlineCenter],
[{block: "start", inline: "end"}, expectedX.blockStart, expectedY.inlineEnd],
[{block: "center", inline: "start"}, expectedX.blockCenter, expectedY.inlineStart],
[{block: "center", inline: "center"}, expectedX.blockCenter, expectedY.inlineCenter],
[{block: "center", inline: "end"}, expectedX.blockCenter, expectedY.inlineEnd],
[{block: "end", inline: "start"}, expectedX.blockEnd, expectedY.inlineStart],
[{block: "end", inline: "center"}, expectedX.blockEnd, expectedY.inlineCenter],
[{block: "end", inline: "end"}, expectedX.blockEnd, expectedY.inlineEnd],
].forEach(([input, expectedX, expectedY]) => {
test(() => {
scroller.scrollTo(0, 0);
target.scrollIntoView(input);
assert_approx_equals(scroller.scrollLeft, expectedX, 0.5, "scrollX");
assert_approx_equals(scroller.scrollTop, expectedY, 0.5, "scrollY");
}, `scrollIntoView(${JSON.stringify(input)})`);
})
</script>
</body>
</html>

View file

@ -0,0 +1,108 @@
<!DOCTYPE html>
<title>CSSOM View - scrollIntoView considers sideways-rl writing mode</title>
<meta charset="utf-8">
<link rel="author" title="Cathie Chen" href="mailto:cathiechen@igalia.com">
<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>
<style>
.box {
float: left;
width: 200px;
height: 200px;
}
#scroller {
writing-mode: sideways-lr;
overflow: scroll;
width: 300px;
height: 300px;
}
#container{
width: 600px;
height: 600px;
}
#target {
background-color: #ff0;
}
</style>
<body>
<div id="scroller">
<div id="container">
<!-- ROW-1 -->
<div class="row">
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
</div>
<!-- ROW-2 -->
<div class="row">
<div class="box"></div>
<div class="box" id="target"></div>
<div class="box"></div>
</div>
<!-- ROW-3 -->
<div class="row">
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
</div>
</div>
</div>
<script>
// In sideways-lr mode, X corresponds to the block axis and is oriented rightward.
// Y corresponds to the inline axis and is oriented upward.
// So the beginning edges are the bottom and left edges and the ending edges are the top and right edges.
// According to the spec, y be min(0, max(y, element padding edge height - element scrolling area height)).
// So y is nonpositive and decreases upward.
// This assumes that the horizontal scrollbar is on the bottom side and the vertical scrollbar is on the right side.
var target = document.getElementById("target");
var scroller = document.getElementById("scroller");
var scrollbar_width = scroller.offsetWidth - scroller.clientWidth;
var scroller_width = scroller.offsetWidth;
var scroller_height = scroller.offsetHeight;
var box_width = target.offsetWidth;
var box_height = target.offsetHeight;
var expectedX = {
blockStart: box_width,
blockCenter: (3*box_width - scroller_width)/2 + scrollbar_width/2,
blockEnd: 2*box_width - scroller_width + scrollbar_width,
};
var expectedY = {
inlineStart: -box_height,
inlineCenter: -((3*box_height - scroller_height)/2) - scrollbar_width/2,
inlineEnd: -(2*box_height - scroller_height) - scrollbar_width,
};
[
[{block: "start", inline: "start"}, expectedX.blockStart, expectedY.inlineStart],
[{block: "start", inline: "center"}, expectedX.blockStart, expectedY.inlineCenter],
[{block: "start", inline: "end"}, expectedX.blockStart, expectedY.inlineEnd],
[{block: "center", inline: "start"}, expectedX.blockCenter, expectedY.inlineStart],
[{block: "center", inline: "center"}, expectedX.blockCenter, expectedY.inlineCenter],
[{block: "center", inline: "end"}, expectedX.blockCenter, expectedY.inlineEnd],
[{block: "end", inline: "start"}, expectedX.blockEnd, expectedY.inlineStart],
[{block: "end", inline: "center"}, expectedX.blockEnd, expectedY.inlineCenter],
[{block: "end", inline: "end"}, expectedX.blockEnd, expectedY.inlineEnd],
].forEach(([input, expectedX, expectedY]) => {
test(() => {
scroller.scrollTo(0, 0);
target.scrollIntoView(input);
assert_approx_equals(scroller.scrollLeft, expectedX, 0.5, "scrollX");
assert_approx_equals(scroller.scrollTop, expectedY, 0.5, "scrollY");
}, `scrollIntoView(${JSON.stringify(input)})`);
})
</script>
</body>
</html>

View file

@ -0,0 +1,111 @@
<!DOCTYPE html>
<title>CSSOM View - scrollIntoView considers sideways-rl writing mode and rtl direction</title>
<meta charset="utf-8">
<link rel="author" title="Cathie Chen" href="mailto:cathiechen@igalia.com">
<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>
<style>
.box {
float: left;
width: 200px;
height: 200px;
}
#scroller {
writing-mode: sideways-rl;
direction: rtl;
overflow: scroll;
width: 300px;
height: 300px;
}
#container{
width: 600px;
height: 600px;
}
#target {
background-color: #ff0;
}
</style>
<body>
<div id="scroller">
<div id="container">
<!-- ROW-1 -->
<div class="row">
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
</div>
<!-- ROW-2 -->
<div class="row">
<div class="box"></div>
<div class="box" id="target"></div>
<div class="box"></div>
</div>
<!-- ROW-3 -->
<div class="row">
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
</div>
</div>
</div>
<script>
// In sideways-rl mode and rtl direction, X corresponds to the block axis and is oriented leftward.
// Y corresponds to the inline axis and is oriented upward.
// So the beginning edges are the bottom and right edges and the ending edges are the top and left edges.
// According to the spec, x be min(0, max(x, element padding edge width - element scrolling area width)).
// So x is nonpositive and decreases leftward.
// According to the spec, y be min(0, max(y, element padding edge height - element scrolling area height)).
// So y is nonpositive and decreases upward.
// This assumes that the horizontal scrollbar is on the bottom side and the vertical scrollbar is on the left side.
var target = document.getElementById("target");
var scroller = document.getElementById("scroller");
var scrollbar_width = scroller.offsetWidth - scroller.clientWidth;
var scroller_width = scroller.offsetWidth;
var scroller_height = scroller.offsetHeight;
var box_width = target.offsetWidth;
var box_height = target.offsetHeight;
var expectedX = {
blockStart: -box_width,
blockCenter: -((3*box_width - scroller_width)/2) - scrollbar_width/2,
blockEnd: -(2*box_width - scroller_width) - scrollbar_width,
};
var expectedY = {
inlineStart: -box_height,
inlineCenter: -((3*box_height - scroller_height)/2) - scrollbar_width/2,
inlineEnd: -(2*box_height - scroller_height) - scrollbar_width,
};
[
[{block: "start", inline: "start"}, expectedX.blockStart, expectedY.inlineStart],
[{block: "start", inline: "center"}, expectedX.blockStart, expectedY.inlineCenter],
[{block: "start", inline: "end"}, expectedX.blockStart, expectedY.inlineEnd],
[{block: "center", inline: "start"}, expectedX.blockCenter, expectedY.inlineStart],
[{block: "center", inline: "center"}, expectedX.blockCenter, expectedY.inlineCenter],
[{block: "center", inline: "end"}, expectedX.blockCenter, expectedY.inlineEnd],
[{block: "end", inline: "start"}, expectedX.blockEnd, expectedY.inlineStart],
[{block: "end", inline: "center"}, expectedX.blockEnd, expectedY.inlineCenter],
[{block: "end", inline: "end"}, expectedX.blockEnd, expectedY.inlineEnd],
].forEach(([input, expectedX, expectedY]) => {
test(() => {
scroller.scrollTo(0, 0);
target.scrollIntoView(input);
assert_approx_equals(scroller.scrollLeft, expectedX, 0.5, "scrollX");
assert_approx_equals(scroller.scrollTop, expectedY, 0.5, "scrollY");
}, `scrollIntoView(${JSON.stringify(input)})`);
})
</script>
</body>
</html>

View file

@ -0,0 +1,108 @@
<!DOCTYPE html>
<title>CSSOM View - scrollIntoView considers sideways-rl writing mode</title>
<meta charset="utf-8">
<link rel="author" title="Cathie Chen" href="mailto:cathiechen@igalia.com">
<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>
<style>
.box {
float: left;
width: 200px;
height: 200px;
}
#scroller {
writing-mode: sideways-rl;
overflow: scroll;
width: 300px;
height: 300px;
}
#container{
width: 600px;
height: 600px;
}
#target {
background-color: #ff0;
}
</style>
<body>
<div id="scroller">
<div id="container">
<!-- ROW-1 -->
<div class="row">
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
</div>
<!-- ROW-2 -->
<div class="row">
<div class="box"></div>
<div class="box" id="target"></div>
<div class="box"></div>
</div>
<!-- ROW-3 -->
<div class="row">
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
</div>
</div>
</div>
<script>
// In sideways-rl mode, X corresponds to the block axis and is oriented leftward.
// Y corresponds to the inline axis and is oriented downward.
// So the beginning edges are the top and right edges and the ending edges are the bottom and left edges.
// According to the spec, x be min(0, max(x, element padding edge width - element scrolling area width)).
// So x is nonpositive and decreases leftward.
// This assumes that the horizontal scrollbar is on the bottom side and the vertical scrollbar is on the left side.
var target = document.getElementById("target");
var scroller = document.getElementById("scroller");
var scrollbar_width = scroller.offsetWidth - scroller.clientWidth;
var scroller_width = scroller.offsetWidth;
var scroller_height = scroller.offsetHeight;
var box_width = target.offsetWidth;
var box_height = target.offsetHeight;
var expectedX = {
blockStart: -box_width,
blockCenter: -((3*box_width - scroller_width)/2) - scrollbar_width/2,
blockEnd: -(2*box_width - scroller_width) - scrollbar_width,
};
var expectedY = {
inlineStart: box_height,
inlineCenter: ((3*box_height - scroller_height)/2) + (scrollbar_width/2),
inlineEnd: ((2*box_height) - scroller_height) + scrollbar_width,
};
[
[{block: "start", inline: "start"}, expectedX.blockStart, expectedY.inlineStart],
[{block: "start", inline: "center"}, expectedX.blockStart, expectedY.inlineCenter],
[{block: "start", inline: "end"}, expectedX.blockStart, expectedY.inlineEnd],
[{block: "center", inline: "start"}, expectedX.blockCenter, expectedY.inlineStart],
[{block: "center", inline: "center"}, expectedX.blockCenter, expectedY.inlineCenter],
[{block: "center", inline: "end"}, expectedX.blockCenter, expectedY.inlineEnd],
[{block: "end", inline: "start"}, expectedX.blockEnd, expectedY.inlineStart],
[{block: "end", inline: "center"}, expectedX.blockEnd, expectedY.inlineCenter],
[{block: "end", inline: "end"}, expectedX.blockEnd, expectedY.inlineEnd],
].forEach(([input, expectedX, expectedY]) => {
test(() => {
scroller.scrollTo(0, 0);
target.scrollIntoView(input);
assert_approx_equals(scroller.scrollLeft, expectedX, 0.5, "scrollX");
assert_approx_equals(scroller.scrollTop, expectedY, 0.5, "scrollY");
}, `scrollIntoView(${JSON.stringify(input)})`);
})
</script>
</body>
</html>

View file

@ -0,0 +1,17 @@
<!DOCTYPE html>
<title>CSS Motion Path: Default offset-anchor with transform-box: fill-box</title>
<link rel="help" href="https://drafts.fxtf.org/motion-1/#offset-anchor-property">
<link rel="match" href="offset-anchor-transform-box-fill-box-ref.html">
<meta name="assert" content="Tests default offset-anchor together with a fill-box transform-box">
<style>
#target {
transform-box: fill-box;
transform-origin: 25% 25%;
offset-path: path("M75,-25v100");
offset-distance: 50%;
}
</style>
<svg width="400" height="400">
<rect width="100" height="100" fill="red"/>
<rect id="target" x="150" y="100" width="100" height="100" fill="green"/>
</svg>

View file

@ -0,0 +1,40 @@
<!DOCTYPE html>
<title>Test element names are case-insensitive only in ASCII range</title>
<link rel="help" href="https://www.w3.org/TR/selectors-4/#case-sensitive">
<link rel="author" title="Koji Ishii" href="mailto:kojii@chromium.org">
<script src='/resources/testharness.js'></script>
<script src='/resources/testharnessreport.js'></script>
<style>
\212A {
display: block;
background: lime;
width: 200px;
height: 100px;
}
</style>
<body>
<p>You should see a green square below.</p>
<div id="container"></div>
<script>
// Insert from JavaScript to avoid parser doing something special.
let test_element = document.createElement('\u212A');
container.appendChild(test_element);
let test_element_with_ns = document.createElementNS('https://dummy.ns', '\u212A');
container.appendChild(test_element_with_ns);
test(() => {
assert_equals(test_element.offsetHeight, 100);
}, 'CSS selector should match for Unicode uppercase element');
test(() => {
// Elements in different namespace cannot compute style or height.
// Test the height of the container instead.
assert_equals(container.offsetHeight, 200);
}, 'Elements with namespace should work the same way');
test(() => {
let e = document.querySelector('k');
assert_equals(e, null);
}, '`querySelector` should not use Unicode case-foldering');
</script>
</body>

View file

@ -28,8 +28,6 @@
var frameWin = document.getElementById("srcdoc-iframe").contentWindow;
assert_equals(frameWin.location.href, "about:srcdoc");
assert_equals(frameWin.scrollY, 0, "Should not have scrolled yet");
frameWin.location.hash = "";
assert_equals(frameWin.location.href, "about:srcdoc#", "Setting an empty hash should result in an empty fragment, not no fragment.");
frameWin.location.hash = "test";
assert_equals(frameWin.location.href, "about:srcdoc#test");
assert_true(frameWin.scrollY > frameWin.innerHeight,

View file

@ -30,6 +30,11 @@
<option style="display:none"></option>
<option></option>
</select>
<select id=minus-one>
<option value=1>1</option>
<option value=2>2</option>
</select>
</form>
<script>
@ -38,6 +43,10 @@ function assertSelectedIndex(select, value) {
assert_equals(select.options.selectedIndex, value);
}
function assertSelectValue(select, value) {
assert_equals(select.value, value);
}
test(function () {
var select = document.getElementById('empty');
assertSelectedIndex(select, -1);
@ -120,4 +129,15 @@ test(function () {
select.options[1].selected = false;
assertSelectedIndex(select, 0);
}, "reset to display:none");
test(function() {
var select = document.getElementById("minus-one");
assertSelectedIndex(select, 0);
select.selectedIndex = -1;
assertSelectedIndex(select, -1);
assertSelectValue(select, "");
}, "set selectedIndex=-1");
</script>

View file

@ -17,7 +17,6 @@ enum SupportedType {
};
[Constructor, Exposed=Window]
interface XMLSerializer {
DOMString serializeToString(Node root);
};

View file

@ -8,16 +8,6 @@ partial namespace CSS {
[SameObject] readonly attribute Worklet animationWorklet;
};
[Exposed=AnimationWorklet, Global=AnimationWorklet, Constructor (optional any options)]
interface StatelessAnimator {
};
[Exposed=AnimationWorklet, Global=AnimationWorklet,
Constructor (optional any options, optional any state)]
interface StatefulAnimator {
any state();
};
[ Global=(Worklet,AnimationWorklet), Exposed=AnimationWorklet ]
interface AnimationWorkletGlobalScope : WorkletGlobalScope {
void registerAnimator(DOMString name, AnimatorInstanceConstructor animatorCtor);

View file

@ -9,7 +9,6 @@ partial interface Navigator {
[NoInterfaceObject]
interface Geolocation {
void getCurrentPosition(PositionCallback successCallback,
optional PositionErrorCallback errorCallback,
optional PositionOptions options);

View file

@ -1,7 +1,7 @@
// GENERATED CONTENT - DO NOT EDIT
// Content was automatically extracted by Reffy into reffy-reports
// (https://github.com/tidoust/reffy-reports)
// Source: Media Capabilities (https://wicg.github.io/media-capabilities/)
// Source: Media Capabilities (https://w3c.github.io/media-capabilities/)
dictionary MediaConfiguration {
VideoConfiguration video;

View file

@ -0,0 +1,15 @@
// GENERATED CONTENT - DO NOT EDIT
// Content was automatically extracted by Reffy into reffy-reports
// (https://github.com/tidoust/reffy-reports)
// Source: Media Playback Quality (https://w3c.github.io/media-playback-quality/)
partial interface HTMLVideoElement {
VideoPlaybackQuality getVideoPlaybackQuality();
};
interface VideoPlaybackQuality {
readonly attribute DOMHighResTimeStamp creationTime;
readonly attribute unsigned long corruptedVideoFrames;
readonly attribute unsigned long droppedVideoFrames;
readonly attribute unsigned long totalVideoFrames;
};

View file

@ -133,11 +133,9 @@ enum VideoResizeModeEnum {
"crop-and-scale"
};
[Exposed=Window,
Constructor(DOMString type, MediaStreamTrackEventInit eventInitDict)]
[Exposed=Window, Constructor(DOMString type, MediaStreamTrackEventInit eventInitDict)]
interface MediaStreamTrackEvent : Event {
[SameObject]
readonly attribute MediaStreamTrack track;
[SameObject] readonly attribute MediaStreamTrack track;
};
dictionary MediaStreamTrackEventInit : EventInit {
@ -145,8 +143,7 @@ dictionary MediaStreamTrackEventInit : EventInit {
};
partial interface Navigator {
[SameObject, SecureContext]
readonly attribute MediaDevices mediaDevices;
[SameObject, SecureContext] readonly attribute MediaDevices mediaDevices;
};
[Exposed=Window, SecureContext]
@ -170,13 +167,15 @@ enum MediaDeviceKind {
"videoinput"
};
[Exposed=Window] interface InputDeviceInfo : MediaDeviceInfo {
[Exposed=Window]
interface InputDeviceInfo : MediaDeviceInfo {
MediaTrackCapabilities getCapabilities();
};
partial interface Navigator {
[SecureContext]
void getUserMedia(MediaStreamConstraints constraints, NavigatorUserMediaSuccessCallback successCallback, NavigatorUserMediaErrorCallback errorCallback);
[SecureContext] void getUserMedia(MediaStreamConstraints constraints,
NavigatorUserMediaSuccessCallback successCallback,
NavigatorUserMediaErrorCallback errorCallback);
};
partial interface MediaDevices {
@ -231,16 +230,15 @@ typedef (double or ConstrainDoubleRange) ConstrainDouble;
typedef (boolean or ConstrainBooleanParameters) ConstrainBoolean;
typedef (DOMString or sequence<DOMString> or ConstrainDOMStringParameters) ConstrainDOMString;
typedef (DOMString or
sequence<DOMString> or
ConstrainDOMStringParameters) ConstrainDOMString;
dictionary Capabilities {
};
dictionary Capabilities {};
dictionary Settings {
};
dictionary Settings {};
dictionary ConstraintSet {
};
dictionary ConstraintSet {};
dictionary Constraints : ConstraintSet {
sequence<ConstraintSet> advanced;

View file

@ -1,7 +1,7 @@
// GENERATED CONTENT - DO NOT EDIT
// Content was automatically extracted by Reffy into reffy-reports
// (https://github.com/tidoust/reffy-reports)
// Source: Media Session Standard (https://wicg.github.io/mediasession/)
// Source: Media Session Standard (https://w3c.github.io/mediasession/)
[Exposed=Window]
partial interface Navigator {

View file

@ -3,7 +3,7 @@
// (https://github.com/tidoust/reffy-reports)
// Source: Payment Request API (https://w3c.github.io/payment-request/)
[Constructor(sequence<PaymentMethodData> methodData, PaymentDetailsInit details, optional PaymentOptions options),
[Constructor(sequence<PaymentMethodData> methodData, PaymentDetailsInit details, optional PaymentOptions options = {}),
SecureContext, Exposed=Window]
interface PaymentRequest : EventTarget {
[NewObject]
@ -153,7 +153,7 @@ interface PaymentResponse : EventTarget {
[NewObject]
Promise<void> complete(optional PaymentComplete result = "unknown");
[NewObject]
Promise<void> retry(optional PaymentValidationErrors errorFields);
Promise<void> retry(optional PaymentValidationErrors errorFields = {});
attribute EventHandler onpayerdetailchange;
};
@ -171,7 +171,7 @@ dictionary PayerErrors {
DOMString phone;
};
[Constructor(DOMString type, optional MerchantValidationEventInit eventInitDict),
[Constructor(DOMString type, optional MerchantValidationEventInit eventInitDict = {}),
SecureContext, Exposed=Window]
interface MerchantValidationEvent : Event {
readonly attribute DOMString methodName;
@ -184,7 +184,7 @@ dictionary MerchantValidationEventInit : EventInit {
USVString validationURL = "";
};
[Constructor(DOMString type, optional PaymentMethodChangeEventInit eventInitDict), SecureContext, Exposed=Window]
[Constructor(DOMString type, optional PaymentMethodChangeEventInit eventInitDict = {}), SecureContext, Exposed=Window]
interface PaymentMethodChangeEvent : PaymentRequestUpdateEvent {
readonly attribute DOMString methodName;
readonly attribute object? methodDetails;
@ -195,7 +195,7 @@ dictionary PaymentMethodChangeEventInit : PaymentRequestUpdateEventInit {
object? methodDetails = null;
};
[Constructor(DOMString type, optional PaymentRequestUpdateEventInit eventInitDict), SecureContext, Exposed=Window]
[Constructor(DOMString type, optional PaymentRequestUpdateEventInit eventInitDict = {}), SecureContext, Exposed=Window]
interface PaymentRequestUpdateEvent : Event {
void updateWith(Promise<PaymentDetailsUpdate> detailsPromise);
};

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