LayoutTests/css3/device-adapt/opera/constrain-006.xhtml - Issue 16103004: [css-device-adapt] Imported opera tests from hg.csswg.org

Side by Side Diff: LayoutTests/css3/device-adapt/opera/constrain-006.xhtml

Issue 16103004: [css-device-adapt] Imported opera tests from hg.csswg.org (Closed) Base URL: https://chromium.googlesource.com/chromium/blink.git@master

Patch Set: Imported snapshot where device-width/height is no longer supported Created 7 years, 6 months ago

Use n/p to move between diff chunks; N/P to move between comments. Draft comments are only viewable by you.

Jump to:

View unified diff | Download patch

OLD	NEW
	(Empty)
1 <?xml version="1.0" encoding="UTF-8"?>

2 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/x html1/DTD/xhtml1-strict.dtd">

3 <html xmlns="http://www.w3.org/1999/xhtml">

4 <head>

5 <title>CSS Test: @viewport constrained - width 200%</title>

6 <link rel="author" title="Rune Lillesveen" href="mailto:rune@opera.com"/>

7 <link rel="help" href="http://www.w3.org/TR/css-device-adapt/#constraining-pro cedure"/>

8 <meta name="flags" content="visual scroll dom" />

9 <meta name="assert" content="Setting width in @viewport to 200% will set the a ctual viewport width to twice the initial-width."/>

10 <script src="../../../resources/testharness.js" type="text/javascript" />

11 <script src="../../../resources/testharnessreport.js" type="text/javascript" / >

12 <style type="text/css"><![CDATA[

13 body { margin: 0; }

14 html, body, #test { width: 100%; height: 100%; }

15 #log { padding: 1em; display: none; }

16 /* Reset viewport values to initial values to ignore UA stylesheet. */

17 @-webkit-viewport {

18 width: auto;

19 height: auto;

20 zoom: auto;

21 min-zoom: auto;

22 max-zoom: auto;

23 user-zoom: zoom;

24 orientation: auto;

25 resolution: auto;

26 }

27 ]]></style>

28 <style type="text/css"><![CDATA[

29 /* CSS for the test below. */

30 @-webkit-viewport { width: 200% }

31 /* Set root element font-size to something different from the initial

32 font-size to make sure 'rem' and 'em' for @viewport is based on the

33 initial font-size, not the root element font-size. */

34 html { font-size: 2rem; }

35 body { font-size: 0.5rem; }

36 ]]></style>

37 <script type="text/javascript"><![CDATA[

38 var test = async_test("CSS Test: @viewport constrained - width 200%");

39 window.onload = function(){

40

41 var testStyleSheet = document.styleSheets.item(1);

42

43 /* Disable the stylesheet that contains the @viewport to test. */

44 testStyleSheet.disabled = true;

45

46 /* Initialize an object to store viewport values to be used by the test

47 asserts. */

48 var viewport = new Object();

49

50 /* An element with the same size as the initial containing block. */

51 var testElm = document.getElementById("test");

52

53 /* Retrieve the initial viewport values before applying the @viewport to

54 test. */

55 viewport.initialWidth = testElm.offsetWidth;

56 viewport.initialHeight = testElm.offsetHeight;

57 viewport.fontSize = parseInt(getComputedStyle(testElm, "").fontSize);

58

59 /* Enable the stylesheet that contains the @viewport to test. */

60 testStyleSheet.disabled = false;

61

62 /* Retrieve the actual viewport values for the test. */

63 viewport.actualWidth = testElm.offsetWidth;

64 viewport.actualHeight = testElm.offsetHeight;

65 viewport.zoom = viewport.initialWidth / window.innerWidth;

66

67 /* Check viewport values. */

68 test.step(function(){

69 assert_equals(viewport.actualWidth, 2*viewport.initialWidth);

70 });

71

72 /* Finished. Show the results. */

73 test.done();

74 testStyleSheet.disabled = true;

75 document.getElementById("log").style.display = "block";

76 }

77 ]]></script>

78 </head>

79 <body>

80 <div id="test">

81 <div id="log"></div>

82 </div>

83 </body>

84 </html>

OLD	NEW